Google AMP - Video

Amp-video trong amp là một video html5 tiêu chuẩn được sử dụng để phát video nhúng trực tiếp. Trong chương này, chúng ta hãy hiểu cách làm việc và sử dụng amp-video.

Để làm việc với amp-video, chúng ta cần thêm tập lệnh sau:

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

Amp-video có thuộc tính src có tài nguyên video được tải, được amp tải một cách lười biếng trong thời gian chạy. Bên cạnh đó, tất cả các tính năng gần giống như thẻ video html5.

Sau đây là các nút sẽ được thêm vào video amp:

  • Source - Bạn có thể thêm các tệp phương tiện khác nhau để phát bằng thẻ này.

  • Track - Thẻ này cho phép bạn bật phụ đề cho video.

  • Placeholder - Thẻ giữ chỗ này sẽ hiển thị nội dung trước khi video bắt đầu.

  • Fallback - Thẻ này sẽ được gọi khi trình duyệt không hỗ trợ video HTML5.

Định dạng thẻ amp-video

Định dạng cho thẻ amp-video được hiển thị ở đây -

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

Hãy để chúng tôi hiểu amp-video bằng cách sử dụng một ví dụ hoạt động như được hiển thị bên dưới -

Thí dụ

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

Đầu ra

Đầu ra của mã được đưa ra ở trên như được hiển thị bên dưới:

Các thuộc tính khả dụng cho amp-video

Các thuộc tính có sẵn cho amp-video được liệt kê trong bảng ở đây -

Sr.No Thuộc tính & Mô tả
1

src

Nếu nút <source> không có, thì src phải được chỉ định và nó phải là https: // url.
2

poster

Người đăng có url img được hiển thị trước khi video bắt đầu.
3

autoplay

Có thuộc tính này trên amp-video sẽ tự động phát video nếu trình duyệt hỗ trợ. Video sẽ phát ở chế độ tắt tiếng và người dùng sẽ phải nhấn vào video để bật tiếng.
4

controls

Có thuộc tính này trên amp-video sẽ hiển thị các điều khiển trên video tương tự như video html5.
5

loop

Nếu thuộc tính này xuất hiện trên amp-video, video sẽ phát lại sau khi kết thúc.
6

crossorigin

Thuộc tính này có hiệu lực nếu tài nguyên để phát video có nguồn gốc khác.
7

rotate-to-fullscreen

Nếu video hiển thị, video sẽ hiển thị toàn màn hình sau khi người dùng xoay thiết bị của họ sang chế độ ngang

Tự động phát video AMP

Chúng tôi có thể sử dụng thuộc tính tự động phát trong trường hợp chúng tôi cần tự động phát video. Tính năng này sẽ hoạt động theo hỗ trợ của trình duyệt. Lưu ý rằng video sẽ ở trạng thái tắt tiếng khi tự động phát. Khi người dùng nhấn vào video, video đó sẽ bị tắt tiếng.

Hãy để chúng tôi tính năng tự động phát với sự trợ giúp của một ví dụ hoạt động như dưới đây:

Thí dụ

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

Bạn có thể kích hoạt các điều khiển cho video bằng cách thêm thuộc tính điều khiển như được hiển thị trong đoạn mã sau:

<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>
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved