Edit

Share via

Audio and Video controls in Power Apps

  • Article

A control that plays an audio file, a video file, or a video on YouTube.

Description

An Audio control plays a sound clip from a file, a recording from a Microphone control, or the audio track from a video file.

A Video control plays a video clip from a file or from YouTube or any external source. Closed captions can optionally be shown when specified.

Important

Videos on Azure Media services are no longer supported. For more information, see Retirement of the service.

Limitations

The audio and video control has these limitations:

  • Power Apps Mobile runs on various types of devices, and some of them have limitations that are specific to that platform:
    • You can play videos in multiple Video controls at the same time on all platforms except iPhone devices.
    • You can record audio with multiple Microphone controls at the same time on all platforms except the web player.

Key properties

Loop – Whether an audio or video clip automatically starts over as soon as it finishes playing.

Media – An identifier for the clip that an audio or video control plays.

Note

  • Use HTTPS for all external videos to ensure compatibility with modern browsers.
  • External videos must be accessible anonymously (without any authentication).

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.

Additional properties

AccessibleLabel – Label for screen readers. Should be the title of the video or audio clip.

AutoPause – Whether an audio or video clip automatically pauses if the user navigates to a different screen.

AutoStart – Whether an audio or video control automatically starts to play a clip when the user navigates to the screen that contains that control.

BorderColor – The color of a control's border.

BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – The thickness of a control's border.

ClosedCaptionsUrl – Video control only. URL of closed captions file in WebVTT format. Both video and captions URLs must be HTTPS. Server hosting both video and captions file needs to be CORS enabled.

DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

Fill – The background color of a control.

FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – The thickness of a control's border when the control is focused.

Height – The distance between a control's top and bottom edges.

Image – The name of the image that appears in an image, audio, or microphone control.

ImagePosition – The position (Fill, Fit, Stretch, Tile, or Center) of an image in a screen or a control if it isn't the same size as the image.

OnEnd – Actions to perform when an audio or video clip finishes playing.

OnPause – Actions to perform when the user pauses the clip that an audio or video control is playing.

OnStart – Actions to perform when the user starts to record with a microphone control.

Paused – True if a media playback control is currently paused, false otherwise.

Reset – Whether a control reverts to its default value.

Start – Whether an audio or video clip plays.

StartTime – The time after the start of an audio or video clip when the clip starts to play.

Time – A media control's current position.

TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – Explanatory text that appears when the user hovers over a control.

Visible – Whether a control appears or is hidden.

Width – The distance between a control's left and right edges.

X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

First( TableName )

Examples

Play an audio or video file

  1. On the File menu, click or tap Media, click or tap Videos or Audio, and then click or tap Browse.

  2. Browse to the file you want to use, click or tap it, and then click or tap Open.

  3. Press Esc to return to the default workspace, add an Audio or Video control, and set its Media property to the file that you added.

    Don't know how to add and configure a control?

  4. Press F5, and then play the clip by clicking or tapping the play button of the control that you added.

    Tip

    The play button of the Video control appears when you hover over the control.

  5. Press Esc to return to the default workspace.

Play a YouTube video

  1. Add a Video control, and set its Media property to the URL of the YouTube video, enclosed in double quotation marks.
  2. Press F5, and then play the clip by clicking or tapping the play button of the Video control.
  3. Press Esc to return to the default workspace.

Accessibility guidelines

Audio and video alternatives

  • ShowControls must be true so that users can listen or watch multimedia at their own pace. This also allows users to toggle closed captions and full-screen mode on video players.
  • Closed captions must be provided for videos.
    • For YouTube videos, use authoring tools provided by YouTube to add captions.
    • For other videos, 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.
  • Consider providing an audio or video transcript using one of these methods:
    1. Put the text in a Label and position it adjacent to the multimedia player. Optionally, create a Button to toggle the display of the text.
    2. Put the text in a different screen. Create a Button that navigates to the screen and position the button adjacent to the multimedia player.
    3. If the description is short, it can be put it in the AccessibleLabel.

Color contrast

There must be adequate color contrast between:

  • FocusedBorderColor and the outside color
  • Image and the multimedia player controls (if applicable)
  • Fill and the multimedia player controls (if the fill is visible)

Provide closed captions and/or transcript if the video content has color contrast issues.

Screen reader support

Keyboard support

  • TabIndex must be zero or greater so that keyboard users can navigate to it.
  • Focus indicators must be clearly visible. Use FocusedBorderColor and FocusedBorderThickness to achieve this.
  • AutoStart should be false because it can be difficult for keyboard users to stop playback quickly.