Google AMP-동영상

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 비디오 태그와 거의 동일합니다.

다음은 앰프 비디오에 추가 할 노드입니다-

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 amp lang = "en">
   <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 =  "http://example.ampproject.org/article-metadata.html">
      <meta name = "viewport" content = "width = device-width, minimum-scale = 1,initial-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에 사용할 수있는 속성은 여기 표에 나열되어 있습니다.

Sr. 아니요	속성 및 설명
1	src <source> 노드가 없으면 src를 지정해야하며 https : // url입니다.
2	poster 포스터는 동영상이 시작되기 전에 표시되는 img url을 사용합니다.
삼	autoplay amp-video에이 속성을 사용하면 브라우저가.
4	controls amp-video에이 속성이 있으면 html5 동영상과 유사한 컨트롤이 동영상에 표시됩니다.
5	loop 이 속성이 amp-video에있는 경우 완료되면 동영상이 다시 재생됩니다.
6	crossorigin 이 속성은 비디오 재생 리소스가 다른 출처에있는 경우 그림에 나타납니다.
7	rotate-to-fullscreen 동영상이 보이는 경우 사용자가 기기를 가로 모드로 회전하면 동영상이 전체 화면으로 표시됩니다.

AMP 동영상 자동 재생

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

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

예

<!doctype html>
<html amp lang = "en">
   <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 = "http://example.ampproject.org/article-metadata.html">

      <meta name = "viewport" content = "width=device-width,minimum-scale = 1, initial-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>

다음 코드와 같이 컨트롤 속성을 추가하여 비디오에 컨트롤을 활성화 할 수 있습니다.

<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>