Google AMP - สื่อ

ในบทนี้เราจะพูดถึงวิธีการแสดงวิดีโอและเสียงจากพันธมิตรบุคคลที่สามเช่น jwplayer และ Youtube ให้เราเรียนรู้โดยละเอียดเกี่ยวกับสิ่งต่อไปนี้ -

  • Google AMP - JwPlayer

  • Google AMP - YouTube

  • Google AMP - เสียง

Google AMP - JwPlayer

หากคุณต้องการใช้ jwplayer เพื่อแสดงวิดีโอบนเพจแอมป์มี amp-jwplayer ให้ทำ

ในการทำงานกับ amp-jwplayer ให้ใส่สคริปต์ต่อไปนี้ในเพจของคุณ -

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

แท็ก Amp-jwplayer

<amp-jwplayer 
   data-playlist-id = "482jsTAr" 
   data-player-id = "uoIbMPm3" 
   layout = "responsive"
   width = "16" 
   height = "9">
</amp-jwplayer>

ตัวอย่างการทำงานของ jwplayer ในหน้า 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 Jwplayer</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-jwplayer" src =
         "https://cdn.ampproject.org/v0/amp-jwplayer-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Amp Jwplayer</h3>
      <amp-jwplayer 
         data-playlist-id = "482jsTAr"
         data-player-id = "uoIbMPm3"
         layout = "responsive"
         width = "16"
         height = "9">
      </amp-jwplayer>
   </body>
</html>

เอาต์พุต

สำหรับ amp-jwplayer มีคุณลักษณะที่สำคัญสามประการ

  • data-player-id

  • data-media-id

  • data-playlist-id

ในการรับรหัสผู้เล่นสื่อและเพลย์ลิสต์คุณต้องมีการเข้าสู่ระบบใน jwplayer ซึ่งสามารถทำได้จากที่นี่ - https://dashboard.jwplayer.com/#/players

รหัสผู้เล่นจะอยู่ในส่วนผู้เล่น jwplayer รหัสสื่อจะพร้อมใช้งานในjwplayer content section และรหัสเพลย์ลิสต์ใน jwplayer playlist section.

Jwplayer ให้รหัสตัวอักษรและตัวเลขแปดหลักซึ่งจำเป็นต้องใช้ใน amp-jwplayer สำหรับแอตทริบิวต์ที่เกี่ยวข้อง

Google AMP - Youtube

หากคุณต้องการแสดงวิดีโอ Youtube บนหน้าแอมป์ของคุณแอมป์มี amp-youtube เพื่อฝังวิดีโอ youtube บนหน้า

ในการใช้ amp-youtube คุณต้องเพิ่มสคริปต์ต่อไปนี้ในเพจของคุณ -

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

แท็กแอมป์ youtube

<amp-youtube 
   width = "480"
   height = "270"
   layout = "responsive"
   autoplay = "true"
   data-videoid = "fWZ6-p7mGK0">
</amp-youtube>

ตอนนี้ให้เราทำงานกับตัวอย่างที่แสดงการทำงานของ amp-youtube บนหน้า

ตัวอย่าง

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Youtube</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-youtube" src =
         "https://cdn.ampproject.org/v0/amp-youtube-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Youtube</h3>
      <h3>Youtube Videos from Tutorialspoint</h3>
      <amp-youtube 
         width = "480"
         height = "270"
         layout = "responsive"
         autoplay = "true"
         data-videoid = "fWZ6-p7mGK0">
      </amp-youtube>
   </body>
</html>

เอาต์พุต

ในการแสดงวิดีโอ youtube คุณต้องให้รหัสวิดีโอกับ amp-youtube ดังที่แสดงด้านล่าง -

<amp-youtube 
   width = "480"
   height = "270"
   layout = "responsive"
   autoplay = "true"
   data-videoid = "fWZ6-p7mGK0">
</amp-youtube>

จะรับ data-videoid ได้อย่างไร?

พิจารณา URL ของ Youtube เช่น - https://www.youtube.com/watch?v=fWZ6-p7mGK0. ส่วนที่ไฮไลต์คือ id ที่จะใช้ใน amp-youtube ของคุณ

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

Google Amp - เสียง

แอมป์มีแท็กสำหรับเล่นเสียงซึ่งแทนที่แท็กเสียง html5 ในการเล่นเสียงในหน้าแอมป์เราสามารถใช้ amp-audio

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

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

แอมป์ - แท็กเสียง

<amp-audio 
   width = "auto"
   height = "50"
   src = "audio/test.mp3">
  <div fallback>
     <p>HTML5 audio is not supported on your browser!</p>
   </div>
</amp-audio>

ดังนั้น amp-audio จะใช้แอตทริบิวต์ src ซึ่งเป็นคำขอ http ไปยังไฟล์เสียง เหตุผลที่เราใช้ amp-audio แทนเสียง html5 มาตรฐานเนื่องจาก amp วางแนวคิดการโหลดแบบขี้เกียจไว้สำหรับองค์ประกอบที่ต้องใช้คำขอ http

จะเริ่มโหลดคำขอตามลำดับความสำคัญโดยจะโหลดก่อนหรือเมื่อกำลังจะถึงวิวพอร์ต

ตัวอย่างการทำงานของการใช้ amp-audio ในเพจของคุณแสดงไว้ที่นี่ -

ตัวอย่าง

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Audio</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-audio" 
         src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Audio</h3>
      <amp-audio 
         width = "auto"
         height = "50"
         src="audio/test.mp3">
            <div fallback>
               <p>HTML5 audio is not supported on your browser!</p>
            </div>
      </amp-audio>
   </body>
</html>

เอาต์พุต

แท็กสำหรับ amp-audio ที่ระบุแอตทริบิวต์เช่น width, height, src จะแสดงที่นี่ เราได้เพิ่ม div ด้วยfallback attribute ซึ่งจะทำหน้าที่เป็นทางเลือกหากเบราว์เซอร์ไม่รองรับ amp-audio

<amp-audio 
   width = "auto"
   height = "50"
   src = "audio/test.mp3">
   <div fallback>
      <p>HTML5 audio is not supported on your browser!</p>
   </div>
</amp-audio>

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

เมื่อคลิกที่ดาวน์โหลดคุณสามารถดาวน์โหลดไฟล์สื่อที่ใช้ หากต้องการปิดการดาวน์โหลดคุณสามารถใช้แอตทริบิวต์ -controlsList="nodownload" ดังแสดงในตัวอย่างด้านล่าง -

ตัวอย่าง

<!doctype html>
<html amp lang = "en">
   <head>
      <meta charset = "utf-8">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <title>Google AMP - Audio</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-audio" 
            src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
         </script>
   </head>
   <body>
      <h3>Google AMP - Audio</h3>
      <amp-audio 
         width = "auto"
         height = "50"
         src = "audio/test.mp3" 
         controlsList = "nodownload">
            <div fallback>
               <p>HTML5 audio is not supported on your browser!</p>
            </div>
      </amp-audio>
   </body>
</html>

เอาต์พุต

การใช้ controlsList="nodownload" จุดแนวตั้งสามจุดทางด้านขวาหายไป

มีคุณลักษณะเช่น preload และ 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 - Audio</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-audio" 
         src = "https://cdn.ampproject.org/v0/amp-audio-0.1.js">
      </script>
   </head>
   <body>
      <h3>Google AMP - Audio</h3>
      <amp-audio 
         width = "auto"
         height = "50"
         src = "audio/test.mp3" preload autoplay>
            <div fallback>
               <p>HTML5 audio is not supported on your browser!</p>
            </div>
      </amp-audio>
   </body>
</html>

เอาต์พุต

แอตทริบิวต์ loopหากมีอยู่จะทำให้เล่นเสียงอีกครั้งเมื่อเสร็จสมบูรณ์

ตัวอย่าง

<amp-audio 
   width = "auto"
   height = "50"
   src = "audio/test.mp3" loop>
   <div fallback>
      <p>HTML5 audio is not supported on your browser!</p>
   </div>
</amp-audio>
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