amp-video
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>
Supported Layouts
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:
sourceetiketleri: 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
tracketiketleri. Parça, dokümandan farklı bir kaynakta barındırılıyorsa<amp-video>etiketinecrossoriginö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>
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.
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