AMP

amp-video

 
You can now use this component outside valid AMP documents using the Bento version of this component. Learn more in the Bento guide.

Description

HTML5 video etiketinin yerini alır.

 

Required Scripts

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

HTML5 video etiketinin yerine gelen bir etiket; yalnızca doğrudan HTML5 video dosyası yerleştirmeleri için kullanılır.

Zorunlu Komut Dosyası <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
Örnekler Örneklerle AMP:
Desteklenen Düzenler fill, fixed, fixed-height, flex-item, nodisplay, responsive

Davranış

amp-video bileşeni, src özelliği tarafından belirtilen video kaynağını çalışma zamanı tarafından belirlenen bir zamanda gecikmeli olarak yükler. amp-video bileşenini, büyük ölçüde standart HTML5 <video> etiketiyle aynı biçimde kontrol edebilirsiniz.

amp-video bileşeni, alt öğe olarak en fazla dört benzersiz HTML düğümü türünü kabul eder:

  • source etiketleri: Tıpkı HTML <video> etiketinde olduğu gibi, oynatmak üzere farklı kaynak medya dosyaları belirtmek için <source> etiketi alt öğelerini ekleyebilirsiniz.
  • videoda altyazıları etkinleştirmek için track etiketleri. Parça, dokümandan farklı bir kaynakta barındırılıyorsa <amp-video> etiketine crossorigin özelliğini eklemeniz gerekir.
  • video başlamadan önce bir yer tutucu
  • tarayıcı HTML5 videoyu desteklemiyorsa bir yedek: Bir veya hemen ilk alt düğüm fallback özelliğine sahip olabilir. Bu düğüm ve alt öğeleri mevcutsa ve kullanıcının tarayıcısında HTML5 video desteklenmiyorsa bu düğüm ve onun alt öğeleri görüntülenen içeriği oluşturur.

Örnek

This browser does not support the video element.

<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>
Bu kod parçacığını playground'ta aç

Analiz

amp-video, ek ayar gerektirmeden analizleri destekler. Daha fazla bilgi için video analizi bölümüne bakın.

Özellikler

src Herhangi bir <source> alt öğesi yoksa gereklidir. HTTPS olmalıdır.
poster Video oynatma başlamadan önce görüntülenecek karenin resmi. Varsayılan olarak ilk kare görüntülenir.
Alternatif olarak, oynatmak için tıklama yer paylaşımı sunabilirsiniz. Ayrıntılar için aşağıdaki Oynatmak için Tıklama yer paylaşımı bölümüne bakın.
autoplay Bu özellik mevcutsa ve tarayıcı otomatik oynatmayı destekliyorsa video görünür hale gelir gelmez otomatik olarak oynatılır. Bileşenin oynatılması için AMP'de Video spesifikasyonunda ana hatlarıyla açıklandığı gibi karşılaması gereken bazı koşullar vardır.
controls Bu özellik, HTML5 video öğesindeki controls özelliğine benzer. Bu özellik mevcutsa tarayıcı, kullanıcının video oynatmayı kontrol etmesine olanak tanıyan kontroller sunar.
controlsList HTML5 video öğesinin controlsList özelliği ile aynıdır. Yalnızca belirli tarayıcılar tarafından desteklenir. Ayrıntılar için lütfen https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controlsList adresine bakın.
dock amp-video-docking uzantısını gerektirir. Bu özellik mevcutsa ve video manuel olarak oynatılıyorsa kullanıcı, video bileşeninin görsel alanını görünüm alanının dışına kaydırdığında video “küçültülür” ve bir köşeye veya bir öğeye sabitlenir. Daha ayrıntılı bilgi için yuvaya yerleştirme uzantısının kendisiyle ilgili dokümanlara bakın.
loop Bu özellik mevcutsa video, sona geldikten sonra otomatik olarak başa döner.
crossorigin Bir track kaynağı, dokümandan farklı bir kaynakta barındırılıyorsa gereklidir.
disableremoteplayback Medya öğesinin, Chromecast veya AirPlay gibi uzaktan oynatma kullanıcı arayüzüne sahip olmasına izin verilip verilmediğini belirler.
muted (kullanım kaldırıldı) muted özelliği kullanımdan kaldırılmıştır ve artık herhangi bir etkisi yoktur. autoplay özelliği, sesi kapatma davranışını otomatik olarak kontrol eder.
noaudio Videonun sesinin olmadığını belirten ek açıklamayı ekler. Bu özellik, video otomatik oynatıldığında görüntülenen ekolayzer simgesini gizler.
rotate-to-fullscreen Video görünür durumdaysa kullanıcının cihazını yatay moda döndürmesinden sonra tam ekranda görüntülenir. Daha fazla bilgi için AMP'de Video spesifikasyonuna bakın.
common attributes Bu öğe, AMP bileşenlerine genişletilmiş ortak özellikleri içerir.

Media Session API'si özellikleri

amp-video bileşeni, geliştiricilerin video dosyası hakkında daha fazla bilgi belirtmesini sağlayan Media Session API'sini uygular. Videoyla ilgili ek bilgiler kullanıcının cihazının bildirim merkezinde (oynatma/duraklatma kontrolleri ile birlikte) görüntülenir.

artwork Videonun posteri olarak yayınlanan bir PNG/JPG/ICO resminin URL'sini belirtir. "artwork" özelliği mevcut değilse Media Session API yardımcısı, "schema.org" tanımındaki `image` alanını veya web sitesinin "favicon" alanını kullanır.
artist Video dosyasının yazarını belirtir; dize biçimindedir.
album Videonun alındığı albümü/koleksiyonu belirtir; dize biçimindedir.
title Videonun adını/başlığını belirtir; dize biçimindedir. Sağlanmadığı takdirde Media Session API yardımcısı, `aria-label` özelliğini veya sayfanın başlığını kullanır.

Örnek:

Bu örnekte poster ve artwork özellikleri yer almaktadır. poster, video oynatılmadan önce yer tutucu resim olarak sunulurken artwork, MediaSession API'si aracılığıyla bildirimde görüntülenen resimdir.

<amp-video width="720" height="305" layout="responsive"
    src="https://yourhost.com/videos/myvideo.mp4"
    poster="https://yourhost.com/posters/poster.png"
    artwork="https://yourhost.com/artworks/artwork.png"
    title="Awesome video" artist="Awesome artist"
    album="Amazing album">
</amp-video>

Oynatmak için Tıklama yer paylaşımı

Oynatmak için tıklama yer paylaşımının sağlanması, web'deki video oynatıcılar için yaygın olarak kullanılan bir kullanıcı deneyimi özelliğidir. Örneğin, kullanıcının tıklayabileceği özel bir oynatma simgesi görüntüleyebilir, ayrıca videonun başlığını, farklı boyutlarda poster resimlerini vb. ekleyebilirsiniz. amp-video bileşeni standart play AMP işlemini desteklediğinden oynatmak için tıklamayı kolayca uygulayabilirsiniz.

Ayrıntılı bir örnek için Örneklerle AMP amp-video ile ilgili oynatmak için tıklama yer paylaşımı sayfasını ziyaret edin.

Doğrulama

AMP doğrulayıcı spesifikasyonundaki amp-video kurallarına bakın.

Daha fazla yardıma mı ihtiyacınız var?

Bu belgeyi defalarca okudunuz ama tüm sorularınıza tatmin edici bir yanıt bulamadınız mı? Belki başka kişiler de bu şekilde hissetmiştir: Stack Overflow'dan onlara ulaşın.

Stack Overflow'a git
Bir hata veya eksik bir özellik mi buldunuz?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

GitHub'a git