Home
AMP
Component

구글 AMP – Video

amp의 Amp-video는 직접 동영상 삽입을 재생하는데 사용되는 표준 html5 동영상입니다. 이 글에서는 amp-video로 작업하고 사용하는 방법을 이해하겠습니다.

amp-video로 작업하려면 다음 스크립트를 추가해야 합니다.

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

Amp-video에는 로드할 비디오 리소스가 있는 src 속성이 있으며 런타임시 amp에 의해 느리게 로드됩니다. 게다가 모든 기능은 html5 비디오 태그와 거의 동일합니다.

다음은 amp video에 추가 할 노드입니다.

  • Source - 이 태그를 사용하여 재생할 다른 미디어 파일을 추가할 수 있습니다.
  • Track - 이 태그를 사용하면 비디오의 자막을 활성화할 수 있습니다.
  • Placeholder - 이 자리표시자 태그는 동영상이 시작되기 전에 콘텐츠를 표시합니다.
  • Fallback - 이 태그는 브라우저가 HTML5 비디오를 지원하지 않을 때 호출됩니다.

amp-video 태그 형식

amp-video 태그의 형식은 다음과 같습니다.

<amp-video controls width="640" height="360" 
           layout="responsive" 
           poster="images/videoposter.png">
  <source src="video/bunny.webm"
          type="video/webm" />
  <source src="video/samplevideo.mp4"
          type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

아래와 같이 실제 예제를 사용하여 amp-video를 이해하겠습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Video</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-video.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-video" 
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
</head>
<body>
<h3>Google AMP - Amp Video</h3>
<amp-video controls
           width="640"
           height="360"
           layout="responsive"
           poster="images/videoposter.png">
  <source src="video/bunny.webm"
          type="video/webm" />
  <source src="video/samplevideo.mp4"
          type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
</body>
</html>

결과

위에 주어진 코드의 출력은 다음과 같습니다.

amp-video에 사용 가능한 속성

amp-video에 사용할 수 있는 속성은 다음 표에 나열되어 있습니다.

속성 설명
src 노드가 없으면 src를 지정해야 하며 https://url입니다.
poster 포스터는 동영상이 시작되기 전에 표시되는 img url을 사용합니다.
autoplay amp-video에 이 속성이 있으면 브라우저가 지원하는 경우 동영상이 자동 재생됩니다. 동영상은 음소거 모드로 재생되며 사용자는 동영상을 탭하여 음소거를 해제해야 합니다.
controls amp-video에 이 속성이 있으면 html5 video과 유사한 컨트롤 바가 동영상에 표시됩니다.
loop 이 속성이 amp-video에 있는 경우 완료되면 동영상이 다시 재생됩니다.
crossorigin 비디오를 재생할 리소스가 다른 출처에 있는 경우이 속성이 나타납니다.
rotate-to-fullscreen 동영상이 표시되는 경우 사용자가 기기를 가로 모드로 회전하면 동영상이 전체 화면으로 표시됩니다.

Amp-video 자동 재생

동영상을 자동 재생해야하는 경우 autoplay 속성을 사용할 수 있습니다. 이 기능은 브라우저 지원에 따라 작동합니다. 자동 재생시 동영상은 음소거 상태가됩니다. 사용자가 비디오를 탭하면 음소거가 해제됩니다.

아래 주어진 작업 예제의 도움으로 자동 재생 기능을 살펴 보겠습니다.

예제

<!doctype html>
<html ⚡ lang="ko">
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Google AMP - Amp Video</title>
  <link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-video.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async custom-element="amp-video" 
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
</head>
<body>
<h3>>Google AMP - Amp Video Autoplay</h3>
<amp-video controls
           width="640"
           height="360"
           layout="responsive"
           poster="images/videoposter.png"
           autoplay>
  <source src="video/bunny.webm"
          type="video/webm" />
  <source src="video/samplevideo.mp4"
          type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
</body>
</html>

다음 코드와 같이 controls 속성을 추가하여 동영상에 컨트롤을 활성화 할 수 있습니다. 

<amp-video controls
           width="640"
           height="360"
           layout="responsive"
           poster="images/videoposter.png"
           autoplay>
  <source src="video/bunny.webm"
          type="video/webm" />
  <source src="video/samplevideo.mp4"
          type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
방문해주셔서 감사합니다. 즐거운 하루 되세요!

댓글 쓰기