Power Apps Audio and Video Control [Detailed tutorial]

In this PowerApps tutorial, We will discuss the Power Apps Audio and Video Control and also will cover these below topics:

• Power Apps Audio Control
• Power Apps Video Control
• PowerApps Audio and Video Control Properties
• How to add PowerApps Audio and Video control
• Play an audio or video file in Power Apps
• Play a YouTube Video in PowerApps
• Play a Video from Azure Media Services
• PowerApps play audio from SharePoint (mp3 files)
• PowerApps play video from SharePoint
• Play Microsoft Stream video in Power Apps
• PowerApps play sound on click
• PowerApps Audio and video alternatives

Also, if you are interested to learn more details about the PowerApps Microphone control and its uses, then refer to the below PowerApps tutorial:

• Power Apps Microphone Control – How to use

Power Apps Audio Control

PowerApps Audio control is an input control that helps to play an audio file in the app. This audio control can play a sound clip from a file, an audio track from the video file, and also a recording from the Microphone control.

Power Apps Video Control

PowerApps Video control is an input control that helps to play a video file or from YouTube or Azure Media Services in the app.

PowerApps Audio and Video Control Properties

Below represents some of the important properties of Power Apps Audio and Video Control as:

1. Media = This is an identifier for the clip that an audio or video control plays.
2. ShowControls = Whether an audio or video player shows, for example, a play button and a volume slider, and a pen control shows, for example, icons for drawing, erasing, and clearing.
3. Loop = It specifies whether an audio or video clip automatically starts over as soon as it finishes playing.
4. AutoPause = if the user navigates to a different screen, then it specifies whether an audio or video clip automatically pauses
5. AutoStart = When the user navigates to the screen that contains that control, then it specifies whether an audio or video control automatically starts to play a clip.
6. ClosedCaptionsUrl = This property is used only for video control. URL of closed captions file in WebVTT format. Both video and captions URLs must be HTTPS. Server hosting both video and captions files needs to be CORS enabled.
7. BorderColor = It defines the color of a control’s border.
8. BorderStyle = It specifies whether a control’s border is Solid, Dashed, Dotted, or None.
9. BorderThickness = It defines the thickness of a control’s border.
10. Image = This specifies the image name that appears in an image, audio, or microphone control.
11. ImagePosition = The position (Fill, Fit, Stretch, Tile, or Center) of an image in a screen or control if it isn’t the same size as the image.
12. OnEnd = When an audio or video clip finishes playing, it defines how an app responds.
13. OnPause = When the user pauses the clip that an audio or video control is playing, it defines how an app responds.
14. OnStart = When the user starts to record with a microphone control, it defines how an app responds.
15. Paused = True if a media playback control is currently paused, false otherwise.
16. Reset = It defines whether a control reverts to its default value.
17. Start = It defines whether an audio or video clip plays.
18. StartTime = The time after the start of an audio or video clip when the clip starts to play.
19. Time = Specifies the media control’s current position.
20. Visible = It helps the user that specifies whether a control appears or is hidden.

Read: Power Apps GroupBy Function example

How to add PowerApps Audio and Video control

Now we will see how to add a Power Apps Audio and Video control in the app.

When you want to play the audio clips, then you can easily use the PowerApps Audio control and if you want to play a video clip, then you can use the PowerApps Video control. Or at the same time, you can add both controls to the PowerApps screen.

Add PowerApps Audio Control

• Go to Insert tab -> Select Media -> Click Audio as shown below. Once you will click on the Audio control, then an audio clip will appear on the screen.

Add PowerApps Video Control

• Go to Insert tab -> Select Media -> Click Video as shown below. Once you will click on the Video control, then a video clip will appear on the screen.

This is how to add audio and video control in Power Apps app.

Read: Customize SharePoint List Forms with PowerApps

Play an audio or video file in Power Apps

Do you want to play an Audio clip or Video clip on the PowerApps screen? Refer to the below things to do so.

Play Audio File in PowerApps

• To play an audio file, select Audio control (that you added on the screen) -> Go to Properties pane -> Select + Add media file -> Browse your audio file from your local system -> Click Open.
• Now the audio file will add to the Audio control. Save, Preview (F5) the app, and then play the clip by clicking the play button of the control that you added. The audio clip will play until you tap to pause it.

Play Video File in PowerApps

• To play a video file, select the Video control (that you added on the screen) -> Go to Properties pane -> Select + Add media file -> Browse your video file from your local system -> Click Open.
• Next, the video file will add to the Video control. Save, Preview (F5) the app, and then play the video.
• If you will hover over the video control, then the play button will appear.
• Also, you can maximize and minimize the screen by using the Full-screen icon that appears on the video.

This is how to play an audio or video file in Power Apps.

Read: Power Apps Image Control

Play a YouTube Video in PowerApps

Suppose you want to play a YouTube video in the PowerApps Video control. So that a user can easily watch the video from the app itself.

• On the PowerApps screen, Insert a PowerApps Video control. Go to its Media property and provide the specific URL of the YouTube video that you want to watch.
• You must ensure that, while you are providing the URL, then it should be enclosed in double quotation marks (” “).

• Save and Preview the app. Then play the Youtube clip by tapping the play button of the video control. To return the default workspace, press Esc.

This is how to play a YouTube Video in Power Apps.

Read: How to use Power Apps for free

Play a Video from Azure Media Services

Below represents a samll steps to how to play a video from the Azure Media Services.

• Copy the manifest URL once the videos are published on AMS (Azure Media Services). You can start the streaming endpoint of your service, if not already.
• Insert a PowerApps Video control and apply the URL of the AMS video on its Media property with double quotation marks.
• Save and Preview the app. Then play the video clip by clicking the play button of the video control.

PowerApps play audio from SharePoint (mp3 or wav files)

In PowerApps, Do you want to play an audio file (maybe it’s an mp3 file or a WAV file) from the SharePoint List? Here I have taken a simple example. Follow these below steps.

Step – 1:

I have a SharePoint List named Audio Files. This list has only two columns Title and Attachments. By default, both the columns are present while creating the list. Also, this list has some records (audio files) as shown below.

Step – 2:

On the PowerApps screen, I have Gallery control. The gallery control has connected to the SharePoint List data source. Set its Items property as:

Items = 'Audio Files'

Where,

‘Audio Files’ = SharePoint list name where the audio mp3 files are present

Step – 3:

Next, insert an audio control and apply this below code to its Media property as:

Media = First(Gallery1.Selected.Attachments).Value

Where,

Gallery1 = Gallery control name

Step – 4:

Now save and preview the app. Select an audio file from the gallery control and then play the audio by clicking the play button from the audio control. You can listen to the audio clip that you have selected from the gallery control.

This is how to play audio files in Power Apps from SharePoint.

Power Apps play video from SharePoint (mp4 file)

Let us assume in PowerApps, you want to play a video clip that are coming from a SharePoint Library. hen you can follow these below easy steps.

Step – 1:

There is a SharePoint Library named Video Files. This library has one video mp4 file as shown below. In this scenario, I want to play this video clip in the PowerApps.

Step – 2:

On the PowerApps screen, there is a vertical gallery control. Select the gallery control and set its Items property to SharePoint Library name.

Items = 'Video Files'

Step – 3:

• Select the gallery control and make its Layout as a Title. Select one section of the gallery and expand the data card vertically.
• Insert a video control and set this below code to its Media property as:

Media = ThisItem.'Link to item'

Step – 4:

Now save and preview the app. Play the video by tapping the play button of the video control and then you can enjoy it by watching this.

This is how to play video files in Power Apps from SharePoint.

Play Microsoft Stream video in Power Apps

In this scenario, We will see how to play a Microsoft Stream video in PowerApps. Refer to these below steps to do so:

Step – 1:

On the PowerApps screen, Go to the Insert tab -> Media -> Select Microsoft Stream. Then the PowerApps stream will appear on the screen as shown below.

Step – 2:

Go to the Microsoft Stream and select one video that you want to play in the Power Apps. Click on the Share icon (to get the link of the selected video) that presents below in the streaming video.

Step – 3:

The Microsoft stream video link will appear like the below screenshot. To copy the link, just tap on the Copy button.

Step – 4:

Next, go back to the PowerApps screen. Select the Power Apps Stream control and paste the copied URL on its Stream URL property.

Step – 5:

Now it’s ready to play the streaming video on the screen. Just save and preview the app. Play the video by tapping the play button as shown below.

This is how to play video from Microsoft Stream in Power Apps.

PowerApps play sound on click

In this scenario, We will see how we can play and pause an audio clip by clicking or tapping a PoweApps Button. This means, when a user will click on the button, then the audio will play, and it will pause when the user will again tap on the button.

• On the PowerApps screen, I have an Audio control and as well as a button control named Start as shown in the below screenshot. Follow these below instructions to do.

• Select the Button control (Start) and apply this below code on its OnSelect property as:

OnSelect = UpdateContext({IsBtnStart: !IsBtnStart})

Where,

IsBtnStart = Context variable name

• Next, Select the PowerApps Audio control and set its Start property as:

Start = IsBtnStart

• Apply this below formula on Audio control’s OnEnd property as:

OnEnd = Reset(Audio2);
UpdateContext({IsBtnStart: false})

Where,

Audio2 = PowerApps Audio control name

• Now Save and Preview the app. Once you will click on the button, then the audio clip will play and again you will press it, then the audio will pause as in the below screenshot.

This is how to play sound on button click on Power Apps.

PowerApps Audio and video alternatives

• For PowerApps Video controls, Closed captions must be provided.
  • For YouTube videos, You can use the authoring tools provided by YouTube to add captions.
  • For other videos, you can create captions in WebVTT format, upload them, and set ClosedCaptionsUrl to the URL location. There are several limitations. Server(s) hosting video and captions needs to be CORS-enabled and serve them using HTTPS protocol. Captioning does not work on Internet Explorer.

• ShowControls is a property of the PowerApps Audio and Video control that should be true so that a user can listen or watch multimedia. It can allow the user to toggle closed captions and full-screen mode on video players.
• Using one of these below methods, you can consider providing an audio or video transcript as:
  • Put the text in a Label and position it adjacent to the multimedia player. You can create a Button to toggle the display of the text.
  • Put the text on a different screen. You can create a Button that navigates to the screen and position the button adjacent to the multimedia player.
  • It can be put in the AccessibleLabel if the description is short.

Also, you may like these below PowerApps tutorials as:

• How to build multilingual app in PowerApps
• Create a canvas app in PowerApps from a SharePoint list (Helpful tutorial)
• Show hide fields based on dropdown selection PowerApps (2 Examples)
• PowerApps CountIf Function with Examples
• PowerApps Count Function with Examples
• PowerApps AddColumns Function with Examples
• PowerApps CheckBox – How to use
• PowerApps Patch Function with examples
• PowerApps if statement with examples
• PowerApps SharePoint Lookup Column + PowerApps Dropdown Example

In this PowerApps tutorial, We discussed these below topics:

• Power Apps Audio Control
• Power Apps Video Control
• PowerApps Audio and Video Control Properties
• How to add PowerApps Audio and Video control
• Play an audio or video file in Power Apps
• Play a YouTube Video in PowerApps
• Play a Video from Azure Media Services
• PowerApps play audio from SharePoint (mp3 files)
• PowerApps play video from SharePoint
• Play Microsoft Stream video in Power Apps
• PowerApps play sound on click
• PowerApps Audio and video alternatives