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>

Amp पेज में jwplayer का एक कामकाजी उदाहरण नीचे दिखाया गया है -

उदाहरण

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

अगर आप अपने amp पेज पर Youtube वीडियो दिखाना चाहते हैं, तो amp में पेज पर youtube वीडियो एम्बेड करने के लिए amp-youtube है।

Amp-youtube का उपयोग करने के लिए, आपको अपने पृष्ठ पर निम्नलिखित स्क्रिप्ट जोड़ने की आवश्यकता है -

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

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

डेटा-विडियो कैसे प्राप्त करें?

उदाहरण के लिए किसी भी YouTube url पर विचार करें - https://www.youtube.com/watch?v=fWZ6-p7mGK0। हाइलाइट किया गया हिस्सा आपके amp-youtube में उपयोग की जाने वाली आईडी है।

हमने विशेषता का उपयोग किया है autoplayसच के रूप में। वीडियो ब्राउज़र द्वारा समर्थित के रूप में ऑटोप्ले होगा और वीडियो भी म्यूट मोड में चलेगा। इसे अनम्यूट करने के लिए आपको वीडियो पर टैप करना होगा। जब यह दृश्य से बाहर हो जाएगा तो वीडियो को रोक दिया जाएगा और जब यह देखने के लिए रुका हुआ स्थिति से फिर से शुरू होगा। यदि उपयोगकर्ता वीडियो को रोक देता है और देखने में / बाहर चला जाता है, तो वीडियो केवल विराम स्थिति में रहेगा। म्यूट / अनम्यूट के लिए भी यही लागू है।

Google Amp - ऑडियो

Amp में ऑडियो चलाने के लिए एक टैग है जो html5 ऑडियो टैग के लिए एक प्रतिस्थापन है। Amp पेज में ऑडियो चलाने के लिए, हम amp- ऑडियो का उपयोग कर सकते हैं।

Amp- ऑडियो के साथ काम करने के लिए, हमें निम्नलिखित स्क्रिप्ट जोड़ने की आवश्यकता है -

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

Amp- ऑडियो टैग

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

इसलिए, एम्पी-ऑडियो src विशेषता लेगा जो ऑडियो फ़ाइल के लिए एक http अनुरोध है। हम मानक html5 ऑडियो के बजाय amp- ऑडियो का उपयोग कर रहे हैं इसका कारण यह है कि amp तत्वों के लिए जगह में एक आलसी लोडिंग अवधारणा डालता है जिसके लिए http अनुरोध की आवश्यकता होती है।

यह प्राथमिकता के आधार पर अनुरोध लोड करना शुरू कर देगा। यह व्यूपोर्ट तक पहुंचने से ठीक पहले या जब इसे लोड किया जाएगा।

आपके पृष्ठ में 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 - 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- ऑडियो के लिए टैग जहां चौड़ाई, ऊंचाई, src जैसी विशेषताओं को निर्दिष्ट किया गया है, यहां दिखाया गया है। हमने एक डिव के साथ भी जोड़ा हैfallback attribute यदि ब्राउजर पर एम्पी-ऑडियो का समर्थन नहीं किया जाता है तो यह एक कमबैक के रूप में कार्य करेगा।

<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 - 2025 | All Rights Reserved