How to Use Power Apps Audio and Video Control?

Did you know how to work with Audio or Video controls in Power Apps? If Not, Don’t worry!

In this Power Apps tutorial, I will explain how to use Power Apps Audio and Video Control and their key properties.

Moreover, you will learn how to add an audio and video control in Power Apps and many more:

  • How to work with audio control in Power Apps
  • How to use Power Apps Video control
  • Power Apps Audio Control SharePoint List
  • How to play a YouTube video in Power Apps

Power Apps Audio and Video Control

The Power Apps Audio Control is an input feature that allows for playing audio files within the app. This control allows playing sound clips from files, audio tracks from video files, and microphone control recordings.

The Power Apps Video Control is designed to facilitate the playback of video files directly within the app from various sources, such as YouTube or Azure Media Services.

Power Apps Audio and Video Control

This is all about Power Apps Audio and Video control.

Power Apps Audio and Video Controls Properties

I will explain the properties of Power Apps Audio and Video controls here.

PropertiesDescription
AccessibleLabelThis property is assigned to a screen reader label.
AutoStartUtilizing a URL of the closed captions file in the WebVTT format is essential to manage video content. The video and captions URLs should also be HTTPS to ensure data security. Finally, the server hosting video and captions files must be CORS enabled to facilitate data transfer between the server and the user’s browser.
Border ColorA user can specify the color for a border.
Border StyleThis property specifies the type of border that the control should have [“Solid,” “Dashed,” “Dotted,” “None”].
ClosedCaptionsUrlUtilizing a URL of the closed captions file in the WebVTT format is essential to manage video content. The video and captions URLs should also be HTTPS to ensure data security. Finally, the server hosting video and captions files must be CORS enabled to facilitate data transfer between the server and the user’s browser.
DisplayModeDetermines whether it enables user input (Edit), only displays data (View), or is disabled (Disabled).
FillThis property displays the background color of the control.
HeightThe vertical measurement between the top and bottom edges of a control.
ImageRefer to the name of the image that is visible in an image, audio, or microphone control.
ImagePositionWhen an image differs in size from the screen or control, it can be positioned using one of the following methods: Fill, Fit, Stretch, Tile, or Center.
LoopThe automatic restart of an audio or video clip upon completion of playback.
MediaSpecify the clip that an audio or video control should play.
OnEndAn app’s response following the conclusion of an audio or video clip is determined by its programming.
OnPauseWhen a user pauses an audio or video control, it determines how the app responds.
OnStartWhen a user starts an audio recording via a microphone, control dictates an application’s corresponding response.
ResetThis property determines whether a control will reset to its default value.
ShowControlsAudio and video players display standard controls such as a play button and volume slider, whereas pen controls typically include icons for drawing, erasing, and clearing.
StartDetermine whether an audio or video clip will play.
StartTimeDescribe the duration between the start of an audio or video clip and the moment the clip begins to play, referred to as the “start-up” time.
TabIndexThis refers to the keyboard navigation sequence that is related to other controls.
VisibleHere, we can specify whether the Audio or Video controls can be visible.
WidthThis refers to measuring the space between a control’s left and right edges.

These are the properties of Power Apps Audio and Video Controls.

How to Add Power Apps Audio and Video Control

Here, I will show you how to insert audio and video Controls in Power Apps:

  • Sign into Power Apps with your valid Microsoft 365 Credentials.
  • Create a Blank canvas app -> On the Power Apps screen, click +Insert -> Expand Media -> Select Audio and Video Controls.
Add Power Apps Audio and Video Control
  • The Power Apps Audio and Video Controls will appear like the screenshot below:
How to add Power Apps Audio and Video Control
  • By default, the Audio and Video control names will be “Audio1“ and “Video1“; you can Rename the audio control using “aud” and the video control using “vid” based on your requirement.
Add Audio and Video Control in Power Apps

This is how to insert Power Apps Audio and Video Controls.

How to use Power Apps Audio and Video Control

Here, let me show you how to use the Power Apps Audio and Video control individually.

How to work with Power Apps Audio Control

This example will show you how to use the Audio control in Power Apps.

Example:

I created a Power Apps canvas app and then added an Audio Control. When a user clicks on an audio control, the audio will be played as shown below:

Power Apps Audio Control

Follow the below steps to achieve this:

  • On the Power Apps screen, insert an Audio control as shown below:
How to use Power Apps audio control
  • On the properties pane of Audio control, Select the Media dropdown control -> Click on the +Add media file.
Audio control in Power Apps
  • Now, select audio from your local device -> Click on the Select button as shown below:
How to work with Power Apps audio control
  • Once your app is ready, SavePublish, and Preview the app. The selected audio will be played when a user clicks on an audio control.
How to use audio control in Power Apps

This is how to work with a Power Apps Audio control.

How to work with Power Apps Video Control

This example will show you how to use the Video control in Power Apps.

Example:

I created a Power Apps canvas app and then added a Video Control. When a user clicks on a video control, the video will be played as shown below:

Power Apps Video Control

Follow the below steps to achieve this:

  • On the Power Apps screen, insert a Video control as shown below:
How to use Power Apps video control
  • Select the Media dropdown control on the Properties pane of Video control -> Click on the +Add media file.
How to work with Power Apps video control
  • Now, select Video from your local device -> Click on the Select button as shown below:
Video Control in Power Apps
  • Once your app is ready, SavePublish, and Preview the app. The selected video will be played when a user clicks on a video control.
How to use video control in Power Apps

This is how to work with a Power Apps Video control.

Power Apps Audio Control SharePoint List

I will explain how to work with an audio control using a SharePoint list in Power Apps here.

Example:

I have a SharePoint List [Power Platform Training] that has two different columns like:

Column NameData Type
CourseTitle
AttachmentsAttachments

I have added the audio related to the courses in the attachments column.

Power Apps Audio Control SharePoint List

I added the Gallery and Audio control on the Power Apps screen. The Gallery control is connected to the above SharePoint list.

Whenever the user selects an audio control play button, the audio will be played based on the selected item from a gallery.

How to work with audio control using SharePoint list in Power Apps

Follow the below steps to achieve this:

  • On the Power Apps screen, insert a Gallery control -> Set its Items property to:
'Power Platform Training'

Where,

  1. ‘Power Platform Training’ = SharePoint list name
Audio Control using SharePoint List in Power Apps
  • Insert an Audio control -> Set its Media property to:
First(Gallery2.Selected.Attachments).Value

Where,

  1. Gallery2 = Gallery control name
  2. Attachments = SharePoint list column name
How to work with Power Apps audio control using SharePoint list
  • SavePublish, and Preview the app. When the user selects a particular item from the gallery and clicks on an audio control play button, based on that the audio will be played.
How to use Power Apps Audio Control with SharePoint List

This is how to work with a Power Apps audio control using a SharePoint list.

How to play a YouTube video in Power Apps

This section will show you how to play a YouTube video in Power Apps so that users can conveniently watch videos within the Power Apps app.

  • On the Power Apps screen, insert a Video control -> Set its Media property to YouTube video link as shown below:
"https://www.youtube.com/watch?v=ek-jF4EQj88&t=56s"

Ensure the weblink is enclosed with an inverted comma (“”).

How to play YouTube video in Power Apps
  • SavePublish, and Preview the app. Now, click the play button to watch the YouTube video in Power Apps.
Play YouTube video in Power Apps

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

Conclusion

I hope this Power Apps article explains everything related to audio and video controls in Power Apps and their key properties.

Moreover, I have covered how to add audio and video control in Power Apps and work with Power Apps audio and video control in Power Apps.

Lastly, you learned to play Power Apps audio control from SharePoint List and play a YouTube video using Power Apps video control.

Additionally, you may like some more Power Apps tutorials: