Google AMP - Medya

Bu bölümde, jwplayer ve Youtube gibi üçüncü taraf ortaklardan video ve sesin nasıl görüntüleneceğini tartışacağız. Aşağıdakileri detaylı olarak öğrenelim -

  • Google AMP - JwPlayer

  • Google AMP - YouTube

  • Google AMP - Ses

Google AMP - JwPlayer

Videoları sayfada göstermek için jwplayer'ı kullanmak istiyorsanız, bunu yapmak için amp'de amp-jwplayer vardır.

Amp-jwplayer ile çalışmak için aşağıdaki komut dosyasını sayfanıza ekleyin -

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

Amp-jwplayer etiketi

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

Amper sayfasında çalışan bir jwplayer örneği aşağıda gösterilmiştir -

Misal

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

Çıktı

Amp-jwplayer için üç önemli özellik vardır

  • data-player-id

  • data-media-id

  • data-playlist-id

Oynatıcı, medya ve oynatma listesinin kimliklerini almak için, buradan yapabileceğiniz jwplayer'da bir oturum açmanız gerekir - https://dashboard.jwplayer.com/#/players

Oyuncu kimliği jwplayer oynatıcı bölümünde mevcut olacaktır. Medya kimliği şurada mevcut olacakjwplayer content section ve içindeki oynatma listesi kimliği jwplayer playlist section.

Jwplayer, ilgili özellik için amp-jwplayer'da kullanılması gereken sekiz basamaklı bir alfasayısal kimlik verir.

Google AMP - Youtube

Youtube videosunu amp sayfanızda göstermek istiyorsanız, amp'de youtube videolarını sayfaya yerleştirmek için amp-youtube vardır.

Amp-youtube'u kullanmak için sayfanıza aşağıdaki komut dosyasını eklemeniz gerekir -

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

Amp-youtube etiketi

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

Şimdi sayfadaki amp-youtube'un çalışmasını gösteren bir örnek üzerinde çalışalım.

Misal

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

Çıktı

Youtube videosunu göstermek için aşağıda gösterildiği gibi amp-youtube'a video kimliği vermeniz gerekir -

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

Data-videoid nasıl alınır?

Örneğin herhangi bir Youtube URL'sini düşünün - https://www.youtube.com/watch?v=fWZ6-p7mGK0. Vurgulanan kısım, amp-youtube'unuzda kullanılacak kimliktir.

Özelliğini kullandık autoplaydoğru. Video, tarayıcı tarafından desteklendiği şekilde otomatik olarak oynatılacak ve ayrıca video sessiz modda oynatılacaktır. Sesi açmak için videoya dokunmanız gerekecek. Görüntüden çıktığında video duraklatılacak ve görüntülemeye geldiğinde duraklatılmış durumdan devam edecektir. Kullanıcı videoyu duraklatırsa ve görüntüye girip çıkarsa, video yalnızca duraklatma durumunda kalacaktır. Aynısı sesi kapatma / açma için de geçerlidir.

Google Amp - Ses

Amp, sesi çalmak için html5 ses etiketinin yerini alan bir etikete sahiptir. Amp sayfasında ses çalmak için amp-audio kullanabiliriz.

Amp-audio ile çalışmak için aşağıdaki komut dosyasını eklememiz gerekiyor -

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

Amp ses etiketi

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

Bu nedenle, amp-audio, ses dosyasına bir http isteği olan src özelliğini alacaktır. Standart html5 sesi yerine amp-audio kullanmamızın nedeni, amp'in http isteği gerektiren öğeler için tembel bir yükleme konsepti yerleştirmesidir.

Önceliğe göre isteği yüklemeye başlayacak ve görüntü alanına ulaşmak üzereyken veya hemen önce yüklenecektir.

Sayfanızda amp-audio kullanmanın çalışan bir örneği burada gösterilmektedir -

Misal

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

Çıktı

Genişlik, yükseklik, src gibi özniteliklerin belirtildiği amp-audio etiketi burada gösterilir. Ayrıca bir div ekledikfallback attribute tarayıcıda amp-audio desteklenmiyorsa yedek olarak işlev görür.

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

Kontrollerin varsayılan olarak ses etiketine eklendiğini ve sesi oynatmak / duraklatmak ve sesi kapatmak / açmak için kullanılabileceğini unutmayın. Aşağıda gösterildiği gibi ses etiketi için indirme seçeneği elde edersiniz -

İndirmeye tıkladığınızda, kullanılan medya dosyasını indirebilirsiniz. İndirmeyi devre dışı bırakmak için şu özelliği kullanabilirsiniz -controlsList="nodownload" aşağıdaki örnekte gösterildiği gibi -

Misal

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

Çıktı

Kullanma controlsList="nodownload" sağ taraftaki üç dikey nokta kayboldu.

Gibi nitelikler vardır preload ve autoplay, ses etiketine eklenirlerse, ses dosyası sayfa yüklendiğinde yüklenir ve tarayıcı destekliyorsa otomatik olarak oynatılır. Aşağıdaki örnek, otomatik ses oynatmayı gösterir.

Misal

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

Çıktı

Öznitelik loop, varsa, ses tamamlandığında yeniden çalınacaktır.

Misal

<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