✅ HTML5 - Gelişmiş Video

İçindekiler

Etiketlenmiş video HTML5 Sayfalarımızı görsel ve işitsel içerik açısından zenginleştirmek için belgelerimizi zenginleştirmek için birçok seçeneğe sahibiz, bağımlı olmadığımız için. eklentiler veya üçüncü şahıslar, videolarımızı, hedeflerimize sorunsuz bir şekilde ulaşmamızı sağlayacak şekilde manipüle edebiliriz.
Video Ön Yüklemesi
Videolar gibi daha ağır içeriklerle çalışırken, içeriğimizi zenginleştirmek yerine tam tersi bir etki yaratabileceğinden ve belgemizi yavaşlatabileceğinden ve kötü bir tarama deneyimi sunabileceğinden, sayfayı doygunlaştırmamaya çok dikkat etmeliyiz.
Bunu tahmin etmek HTML5 Video öğesinde, bu şekilde gösterilecek videoyu önceden yüklememize, kullanıcıya göstermeden önce biraz içeriğimiz olduğundan emin olmamızı ve böylece sayfamızdaki deneyimlerini kesintiye uğratmamamızı sağlar.
Bunun için aşağıdaki öznitelikleri kullanabiliriz:
ön yükleme - video önyükleme işlevini kullanmamıza izin verecek özelliktir.
Yok - kullanıcı oynatana kadar video yüklenmeyecek.
meta veri - yalnızca videonun meta verileri, yani videonun boyut, süre vb. ayrıntıları önceden yüklenecektir.
araba - tarayıcı gerekli gördüğünde videoyu otomatik olarak indirebilir, tarayıcı bu talimatı görmezden gelebilir, bu varsayılan davranıştır.
Bu özelliğin nasıl kullanılacağına dair küçük bir kod örneği görelim:

 Örnek Video görüntülenemiyor Video görüntülenemiyor

Aşağıdaki resimde tarayıcının öznitelikleri kullanarak videoya yapılan çağrıyı nasıl yorumladığını görüyoruz. Yok Y meta veriler:

Bu özelliği dengeli bir şekilde kullanmamız gerektiğini vurgulamak önemlidir, çünkü bant genişliğinin yanı sıra kaynakları da gereksiz yere tüketebiliriz, bu da sayfamızı kullanma konusunda kötü bir deneyime dönüşebilir.
Videonuz için bir kapak resmi yerleştirin
Video sayfamızın önemli bir parçası olduğu için tasarımı bozabileceğinden ilk kareyi göstermesine izin veremiyoruz bunun için kapak resmi koyabiliriz veya Yer tutucu, bununla kullanıcı henüz videoyu oynatma emri vermemişse hangi resmin gösterileceğini bile kontrol edebiliriz, bunun için poster niteliklerini kullanabiliriz, bunun için aşağıdaki kod örneğini görebiliriz.

 Örnek Video görüntülenemiyor

Şimdi tarayıcının bunu nasıl yorumladığını ve kullanıcının bunu nasıl göreceğini biraz görelim:

BÜYÜT

Bu efekti elde etmek için, videonun ekran görüntüsü yapıldı, ardından özellik afiş bu resmi video elementimizin kapağı olarak yerleştirebiliriz.
Bununla bu öğreticiyi bitiriyoruz, bu yeni özelliklerle videolarımızı gösterme şeklimizi daha iyi kontrol edebiliyor ve bu şekilde yeni, daha zengin ve daha etkileşimli belgeler oluşturabiliyoruz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.