Google AMP - วิดีโอ

แอมป์วิดีโอในแอมป์เป็นวิดีโอ html5 มาตรฐานที่ใช้เล่นวิดีโอฝังโดยตรง ในบทนี้ให้เราเข้าใจวิธีการทำงานและใช้ amp-video

ในการทำงานกับ amp-video เราต้องเพิ่มสคริปต์ต่อไปนี้ -

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

แอมป์วิดีโอมีแอตทริบิวต์ src ซึ่งมีทรัพยากรวิดีโอที่จะโหลดซึ่งโหลดโดยแอมป์ขณะรันไทม์ นอกจากนี้คุณสมบัติทั้งหมดเกือบจะเหมือนกับแท็กวิดีโอ 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 แสดงอยู่ในตารางที่นี่ -

ซีเนียร์ No	คุณสมบัติและคำอธิบาย
1	src หากไม่มีโหนด <source> แสดงว่าจะต้องระบุ src และเป็น https: // url
2	poster ผู้โพสต์ใช้ img url ซึ่งจะแสดงก่อนที่วิดีโอจะเริ่ม
3	autoplay การมีแอตทริบิวต์นี้ใน amp-video จะเล่นวิดีโอโดยอัตโนมัติหากเบราว์เซอร์รองรับวิดีโอจะเล่นในโหมดปิดเสียงและผู้ใช้จะต้องแตะที่วิดีโอเพื่อเปิดเสียง
4	controls การมีแอตทริบิวต์นี้ใน amp-video จะแสดงการควบคุมวิดีโอคล้ายกับวิดีโอ html5
5	loop หากมีแอตทริบิวต์นี้อยู่ใน amp-video วิดีโอจะเล่นอีกครั้งเมื่อเสร็จสิ้น
6	crossorigin แอตทริบิวต์นี้จะปรากฏในภาพหากทรัพยากรในการเล่นวิดีโออยู่ในแหล่งกำเนิดอื่น
7	rotate-to-fullscreen หากมองเห็นวิดีโอวิดีโอจะแสดงแบบเต็มหน้าจอหลังจากที่ผู้ใช้หมุนอุปกรณ์เข้าสู่โหมดแนวนอน

เล่นวิดีโอ AMP อัตโนมัติ

เราสามารถใช้แอตทริบิวต์เล่นอัตโนมัติในกรณีที่เราต้องการเล่นวิดีโออัตโนมัติ คุณลักษณะนี้จะทำงานตามการสนับสนุนเบราว์เซอร์ โปรดทราบว่าวิดีโอจะอยู่ในสถานะปิดเสียงเมื่อเล่นอัตโนมัติ เมื่อผู้ใช้แตะที่วิดีโอวิดีโอนั้นจะถูกเปิดเสียง

ให้เราใช้คุณสมบัติเล่นอัตโนมัติด้วยความช่วยเหลือของตัวอย่างการทำงานที่ให้ไว้ด้านล่าง -

ตัวอย่าง

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