PowerApps의 오디오 및 동영상Audio and Video controls in PowerApps

오디오 파일, 동영상 파일 또는 YouTube의 동영상을 재생하는 컨트롤입니다.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.

비디오 컨트롤은 파일이나 YouTube 또는 Azure Media Services에서 비디오 클립을 재생합니다.A Video control plays a video clip from a file or from YouTube or Azure Media Services. 지정된 경우에는 선택적으로 선택 자막이 표시될 수 있습니다.Closed captions can optionally be shown when specified.

주요 속성Key properties

Loop – 재생을 마치는 즉시 오디오 또는 동영상 클립이 자동으로 시작할지 여부를 선택합니다.Loop – Whether an audio or video clip automatically starts over as soon as it finishes playing.

Media – 오디오 또는 동영상 컨트롤이 재생하는 클립에 대한 식별자입니다.Media – An identifier for the clip that an audio or video control plays.

ShowControls - 오디오 또는 비디오 플레이어에서 재생 단추, 볼륨 슬라이더 등을 표시하는지 및 펜 컨트롤에서 그리기, 삭제 및 지우기 아이콘 등을 표시하는지 여부입니다.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 – 화면 읽기 프로그램의 레이블입니다.AccessibleLabel – Label for screen readers. 비디오 또는 오디오 클립의 제목이어야 합니다.Should be the title of the video or audio clip.

AutoPause – 사용자가 다른 화면으로 이동하는 경우 오디오 또는 비디오 클립을 자동으로 일시 중지할지 여부입니다.AutoPause – Whether an audio or video clip automatically pauses if the user navigates to a different screen.

AutoStart - 사용자가 해당 컨트롤이 포함된 화면으로 이동할 때 오디오 또는 비디오 컨트롤에서 클립을 자동으로 재생할지 여부입니다.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 - 컨트롤의 테두리 색입니다.BorderColor – The color of a control's border.

BorderStyle - 컨트롤의 테두리는 Solid, Dashed, Dotted, None입니다.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness - 컨트롤의 테두리 굵기입니다.BorderThickness – The thickness of a control's border.

ClosedCaptionsUrl – 비디오 컨트롤만 해당합니다.ClosedCaptionsUrl – Video control only. WebVTT 형식인 선택 자막 파일의 URL입니다.URL of closed captions file in WebVTT format. 비디오 및 캡션 URL은 모두 HTTPS여야 합니다.Both video and captions URLs must be HTTPS. 비디오 및 캡션 파일을 모두 호스팅하는 서버는 CORS를 사용하도록 설정되어야 합니다.Server hosting both video and captions file needs to be CORS enabled.

DisplayMode – 컨트롤이 사용자 입력을 허용(편집)하거나, 데이터만 표시(보기)하거나 사용 안 하도록(사용 안 함) 설정할지 선택합니다.DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

Fill - 컨트롤의 배경색입니다.Fill – The background color of a control.

FocusedBorderColor – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 색입니다.FocusedBorderColor – The color of a control's border when the control is focused.

FocusedBorderThickness – 컨트롤에 포커스가 있을 때 컨트롤의 테두리 두께입니다.FocusedBorderThickness – The thickness of a control's border when the control is focused.

Height – 컨트롤의 위쪽 및 아래쪽 가장자리 사이의 간격입니다.Height – The distance between a control's top and bottom edges.

Image – 이미지, 오디오 또는 마이크 컨트롤에 표시되는 이미지의 이름입니다.Image – The name of the image that appears in an image, audio, or microphone control.

ImagePosition – 이미지와 같은 크기가 아닌 경우 컨트롤 또는 화면에 있는 이미지의 위치입니다(채우기, 맞춤, 늘이기, 타일 또는 가운데).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 - 오디오 또는 동영상 클립이 재생을 마칠 때 앱이 응답하는 방식입니다OnEnd – How an app responds when an audio or video clip finishes playing.

OnPause - 사용자가 오디오 또는 동영상 컨트롤이 재생하는 클립을 일시 중지할 때 앱이 응답하는 방식입니다.OnPause – How an app responds when the user pauses the clip that an audio or video control is playing.

OnStart – 사용자가 마이크 컨트롤로 녹음을 시작할 때 앱이 응답하는 방식입니다.OnStart – How the app responds when the user starts to record with a microphone control.

Paused – 미디어 재생 컨트롤이 현재 일시 중지되면 True이고 그렇지 않으면 false입니다.PausedTrue if a media playback control is currently paused, false otherwise.

Reset – 컨트롤이 기본값으로 되돌아가는지 여부입니다.Reset – Whether a control reverts to its default value.

Start – 오디오 또는 동영상 클립의 재생 여부를 선택합니다.Start – Whether an audio or video clip plays.

StartTime – 클립이 재생을 시작할 때 오디오 또는 동영상 클립의 시작 후 시간입니다.StartTime – The time after the start of an audio or video clip when the clip starts to play.

Time – 미디어 컨트롤의 현재 위치입니다.Time – A media control's current position.

TabIndex – 다른 컨트롤에 관련된 키보드 탐색 순서입니다.TabIndex – Keyboard navigation order in relation to other controls.

Tooltip – 사용자가 마우스로 컨트롤을 가리킬 때 표시되는 설명 텍스트입니다.Tooltip – Explanatory text that appears when the user hovers over a control.

Visible – 컨트롤을 표시하거나 숨길지 여부를 선택합니다.Visible – Whether a control appears or is hidden.

Width – 컨트롤의 왼쪽 및 오른쪽 가장자리 사이의 간격입니다.Width – The distance between a control's left and right edges.

X – 컨트롤의 왼쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 왼쪽 가장자리 사이의 거리입니다.X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – 컨트롤의 위쪽 가장자리와 해당 부모 컨테이너(부모 컨테이너가 없는 경우 화면)의 위쪽 가장자리 사이의 거리입니다.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 )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. Esc 키를 눌러 기본 작업 영역으로 돌아가 오디오 또는 비디오 컨트롤을 추가하고 Media 속성을 사용자가 추가한 파일로 설정합니다.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. F5 키를 누르고 사용자가 추가한 컨트롤의 재생 단추를 클릭하거나 탭하여 클립을 재생합니다.Press F5, and then play the clip by clicking or tapping the play button of the control that you added.

    동영상 컨트롤의 재생 단추는 컨트롤을 마우스로 가리킬 때 나타납니다.The play button of the Video control appears when you hover over the control.

  5. 기본 작업 영역으로 돌아가려면 Esc 키를 누릅니다.Press Esc to return to the default workspace.

YouTube 동영상을 재생합니다Play a YouTube video

  1. 비디오 컨트롤을 추가하고 Media 속성을 YouTube 비디오의 URL(큰따옴표로 묶인)로 설정합니다.Add a Video control, and set its Media property to the URL of the YouTube video, enclosed in double quotation marks.
  2. F5 키를 누르고 동영상 컨트롤의 재생 단추를 클릭하거나 탭하여 클립을 재생합니다.Press F5, and then play the clip by clicking or tapping the play button of the Video control.
  3. 기본 작업 영역으로 돌아가려면 Esc 키를 누릅니다.Press Esc to return to the default workspace.

Azure Media Services에서 비디오 재생Play a video from Azure Media Services

  1. 비디오가 AMS에 게시된 후 매니페스트 URL을 복사합니다.After the videos are published on AMS, copy the manifest URL. 아직 시작되지 않은 경우 서비스의 스트리밍 엔드포인트를 시작합니다.Start the streaming endpoint of your service, if not already.
  2. 비디오 컨트롤을 추가하고 Media 속성을 AMS 비디오의 URL(큰따옴표로 묶인)로 설정합니다.Add a Video control, and set its Media property to the URL of the AMS video, enclosed in double quotation marks.
  3. F5 키를 누르고 동영상 컨트롤의 재생 단추를 클릭하거나 탭하여 클립을 재생합니다.Press F5, and then play the clip by clicking or tapping the play button of the Video control.
  4. 기본 작업 영역으로 돌아가려면 Esc 키를 누릅니다.Press Esc to return to the default workspace.

접근성 지침Accessibility guidelines

오디오 및 비디오 대체 항목Audio and video alternatives

  • 사용자가 자신만의 속도로 멀티미디어를 듣거나 볼 수 있도록 ShowControls는 true여야 합니다.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.
    • YouTube 비디오의 경우 YouTube에서 제공하는 작성 도구를 사용하여 자막을 추가합니다.For YouTube videos, use authoring tools provided by YouTube to add captions.
    • 다른 비디오의 경우 WebVTT 형식으로 자막을 만들어 업로드하고 ClosedCaptionsUrl을 URL 위치로 설정합니다.For other videos, create captions in WebVTT format, upload them, and set ClosedCaptionsUrl to the url location. 몇 가지 제한 사항이 있습니다.There are several limitations. 비디오 및 자막을 호스트하는 서버는 CORS를 지원해야 하고 HTTPS 프로토콜을 사용하여 비디오 및 자막을 제공해야 합니다.Server(s) hosting video and captions needs to be CORS-enabled and serve them using HTTPS protocol. Internet Explorer에서는 자막이 작동하지 않습니다.Captioning does not work on Internet Explorer.
  • 다음 방법 중 하나를 사용하여 오디오 또는 비디오 기록을 제공하는 것이 좋습니다.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. 설명이 간단하면 AccessibleLabel 에 설명을 넣을 수 있습니다.If the description is short, it can be put it in the AccessibleLabel.

색 대비Color contrast

다음 사이에 적절한 색 대비가 있어야 합니다.There must be adequate color contrast between:

  • FocusedBorderColor 및 외부 색FocusedBorderColor and the outside color
  • Image 및 멀티미디어 플레이어 컨트롤(해당하는 경우)Image and the multimedia player controls (if applicable)
  • Fill 및 멀티미디어 플레이어 컨트롤(채우기가 표시되는 경우)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 가 0 이상이어야 합니다.TabIndex must be zero or greater so that keyboard users can navigate to it.
  • 포커스 표시기가 명확하게 표시되어야 합니다.Focus indicators must be clearly visible. FocusedBorderColorFocusedBorderThickness 를 사용하여 이를 달성합니다.Use FocusedBorderColor and FocusedBorderThickness to achieve this.
  • 키보드 사용자가 재생을 빠르게 중지하기 어려울 수 있으므로 AutoStart는 false여야 합니다.AutoStart should be false because it can be difficult for keyboard users to stop playback quickly.