amp-video

You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

HTML5 동영상 태그를 대체합니다.

Required Scripts

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

Supported Layouts

fill fixed fixed-height flex-item intrinsic nodisplay responsive

예제

amp-app-banner amp-video Advanced Video Docking Click-to-play overlay for amp-video Integrating Videos in AMP an Overview Rich Media Notifications Video Carousels with amp-carousel Video rotate to fullscreen with hint

HTML5 video 태그의 대체 태그입니다. HTML5 동영상 파일 직접 삽입에만 사용합니다.

필수 스크립트	`<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>`
예	AMP By Example의 예: amp-video 예 amp-video의 클릭하여 재생 오버레이
지원되는 레이아웃	fill, fixed, fixed-height, flex-item, nodisplay, responsive

동작

amp-video 구성요소에서는 런타임에서 결정한 시간에 src 속성으로 지정된 동영상 리소스를 로드합니다. 표준 HTML5 <video> 태그와 동일한 방식으로 amp-video 구성요소를 제어할 수 있습니다.

amp-video 구성요소에서는 하위 요소로 고유한 유형의 HTML 노드를 4개까지 허용합니다.

source 태그: HTML <video> 태그에서와 같이 <source> 태그 하위 요소를 추가하여 재생할 여러 다른 소스 미디어 파일을 지정할 수 있습니다.
track 태그: 동영상에서 자막을 사용하도록 설정합니다. 문서와 다른 원본에서 트랙을 호스팅하는 경우 <amp-video> 태그에 crossorigin 속성을 추가해야 합니다.
동영상이 시작하기 전의 자리표시자
브라우저에서 HTML5 동영상을 지원하지 않는 경우 대체: 하나 이상의 직속 하위 노드에 fallback 속성이 있을 수 있습니다. 이 노드와 하위 노드가 있으면 HTML5 동영상이 사용자의 브라우저에서 지원되지 않는 경우 해당 노드가 표시되는 콘텐츠를 구성합니다.

예

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

이 코드 조각을 Playground에서 열기

분석

amp-video에서는 바로 사용할 수 있는 분석을 지원합니다. 자세한 정보는 동영상 분석을 참조하세요.

속성

src	`<source>` 하위가 없는 경우 필요합니다. HTTPS여야 합니다.
poster	동영상 재생을 시작하기 전에 표시할 프레임의 이미지입니다. 기본적으로 첫 번째 프레임이 표시됩니다. 또는 클릭하여 재생 오버레이를 표시할 수 있습니다. 세부정보는 아래 클릭하여 재생 오버레이 섹션을 참조하세요.
autoplay	이 속성이 표시되지 않고 브라우저에서 자동 재생을 지원하는 경우 동영상이 표시되는 즉시 자동으로 재생됩니다. 구성요소를 재생하기 위해 처리 완료되어야 하는 조건이 몇 가지 있습니다. 이 조건은 AMP 사양의 동영상에서 간략하게 설명합니다.
controls	이 속성은 HTML5 `video`의 `controls` 속성과 비슷합니다. 이 속성이 표시되면 브라우저에서 사용자가 동영상 재생을 제어할 수 있는 컨트롤을 제공합니다.
controlsList	HTML5 동영상 요소의 controlsList 속성과 같습니다. 특정 브라우저에서만 지원됩니다. 세부정보는 https://developer.mozilla.org/ko-KR/docs/Web/API/HTMLMediaElement/controlsList를 참조하세요.
dock	`amp-video-docking` 확장 프로그램이 필요합니다. 이 속성이 있고 동영상을 수동으로 재생하는 경우 사용자가 동영상 구성요소의 시각적 영역 밖으로 스크롤하면 동영상이 '최소화'되고 모서리 또는 요소에 고정됩니다. 자세한 내용은 도킹 확장 프로그램 자체에 관한 문서를 참조하세요.
loop	동영상이 끝에 도달하면 시작 부분으로 돌아와 자동으로 연속 재생합니다(있는 경우).
crossorigin	`track` 리소스가 문서와 다른 원본에서 호스팅되는 경우 필요합니다.
disableremoteplayback	미디어 요소에 Chromecast 또는 AirPlay와 같은 원격 재생 UI가 있을 수 있는지 결정합니다.
muted(지원 중단됨)	`muted` 속성은 지원이 중단되었으므로 더 이상 적용되지 않습니다. `autoplay` 속성에서 음소거 동작을 자동으로 제어합니다.
noaudio	동영상에 오디오가 없는 것으로 주석 처리합니다. 그러면 동영상이 자동재생될 때 표시되는 이퀄라이저 아이콘을 숨깁니다.
rotate-to-fullscreen	동영상이 표시되고 사용자가 기기를 가로 모드로 회전하면 동영상이 전체 화면으로 표시됩니다. 자세한 내용은 AMP 사양의 동영상을 참조하세요.
공통 속성	이 요소에는 AMP 구성요소로 확장된 공통 속성이 포함됩니다.

Media Session API 속성

amp-video 구성요소에서는 개발자가 동영상 파일에 관한 자세한 정보를 지정하는 데 사용할 수 있는 Media Session API를 구현합니다. 동영상에 관한 추가 정보는 사용자 기기의 알림 센터에 표시됩니다(재생/일시중지 컨트롤과 함께).

artwork	동영상의 아트워크로 제공되는 PNG/JPG/ICO 이미지의 URL을 지정합니다. `artwork`가 표시되지 않으면 Media Session API 도우미에서 `schema.org` 정의의 `image` 필드, `og:image` 또는 웹사이트의 `favicon`을 사용합니다.
artist	동영상 파일의 저자를 나타내며 문자열로 지정합니다.
album	동영상의 출처인 앨범/컬렉션을 나타내며 문자열로 지정합니다.
title	동영상의 이름/제목을 나타내며 문자열로 지정합니다. 표시되지 않는 경우 Media Session API 도우미에서 `aria-label` 속성을 사용하거나 페이지 제목으로 대체합니다.

예:

이 예에는 poster와 artwork 속성이 둘 다 포함되어 있습니다. poster는 동영상 재생 전의 자리표시자 이미지로 제공되는 반면 artwork는 MediaSession API를 통해 알림에 표시되는 이미지입니다.

<amp-video width="720" height="305" layout="responsive"
    src="https://yourhost.com/videos/myvideo.mp4"
    poster="https://yourhost.com/posters/poster.png"
    artwork="https://yourhost.com/artworks/artwork.png"
    title="Awesome video" artist="Awesome artist"
    album="Amazing album">
</amp-video>

클릭하여 재생 오버레이

클릭하여 재생 오버레이는 웹에서 실행되는 동영상 플레이어에 대한 일반적인 UX 기능입니다. 예를 들어 사용자가 클릭할 맞춤 재생 아이콘을 표시할 뿐 아니라 동영상 제목, 다른 크기의 포스터 이미지 등을 포함할 수 있습니다. amp-video 구성요소에서는 표준 play AMP 작업을 지원하므로 클릭하여 재생을 쉽게 구현할 수 있습니다.

자세한 예는 AMP By Example에 있는 amp-video의 클릭하여 재생 오버레이를 참조하세요.

유효성 검사

AMP 유효성 검사기 사양의 amp-video 규칙을 참조하세요.

도움이 더 필요하신가요?

이 문서를 수십 번 읽었음에도 여전히 궁금한 점이 남아 있나요? 다른 개발자들도 같은 심정일지 모릅니다. Stack Overflow에서 소통해 보세요.

Stack Overflow로 이동

버그나 누락된 기능을 발견하셨나요?

AMP 프로젝트는 여러분의 참여와 기여를 적극 환영합니다! 오픈 소스 커뮤니티를 통해 지속적으로 활동해 주셔도 좋지만 관심 있는 주제에 한 번만 기여하셔도 큰 도움이 됩니다.

GitHub로 이동하기

amp-video 1.0 0.1