AMP

amp-video

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üzenlerfill, 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

Tam kodu göster

Analiz

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

Özellikler

srcHerhangi bir <source> alt öğesi yoksa gereklidir. HTTPS olmalıdır.
posterVideo 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.
autoplayBu ö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.
controlsBu ö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.
controlsListHTML5 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.
dockamp-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.
loopBu özellik mevcutsa video, sona geldikten sonra otomatik olarak başa döner.
crossoriginBir track kaynağı, dokümandan farklı bir kaynakta barındırılıyorsa gereklidir.
disableremoteplaybackMedya öğ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.
noaudioVideonun sesinin olmadığını belirten ek açıklamayı ekler. Bu özellik, video otomatik oynatıldığında görüntülenen ekolayzer simgesini gizler.
rotate-to-fullscreenVideo 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 attributesBu öğ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.

artworkVideonun 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.
artistVideo dosyasının yazarını belirtir; dize biçimindedir.
albumVideonun alındığı albümü/koleksiyonu belirtir; dize biçimindedir.
titleVideonun 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.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub