Sayfa içeriği
Videoların etiketleri ve özellikleri
Genel olarak, tarayıcıya sayfada bir video görüntülemek istediğimizi söylemek için <video> etiketini kullanırız.
Görüntülemek istediğimiz videoyu belirtmek için <source> etiketini kullanırız.
HTML5, bir web sayfasına video yerleştirmenin iki yolunu sunar ve her ikisi de <video> öğesini kullanır. Ve tek bir video dosyanız varsa, <img src="..."> etiketiyle bir resim eklemeye çok benzer şekilde, src özelliğine bir bağlantı video ekleyebilirsiniz.
Gösterilebilecek video türleri
bu üç tür ".mp4 , .webm ve .ogg" Tüm tarayıcılarda çalışır ve bununla, tarayıcıların herhangi bir eklentiye ihtiyaç olmadan bu türlerle başa çıkacak şekilde yapılandırıldığını kastediyoruz.
Ama demek istediğimiz şu ki, bu formüller herhangi bir harici eklenti olmadan tüm tarayıcılarda çalışıyor ancak kullanıcının cihazı formülü desteklemiyor olabilir.
Genel olarak .mp4 ve .webm kullanmanızı öneririm
Kullanıcının cihazı zayıfsa ve sayfada yayınlanan video çok yüksek çözünürlüğe sahipse, bunun tarayıcının videoyu üzerinde başlatmıyacak olduğu unutmayın.
Bu nedenle, başlatılabilecek video türlerinin yanı sıra, kullanıcı tarafından hangi videoların başlatılabileceğini belirlerken videoların çözünürleri bakılması gereken bir şeydir.
Genel olarak 360p çözünürlük tüm kullanıcılarda, 480p ise kullanılan yaklaşık tüm cihazlarda çalışır.
Video etiketi özellikleri
<video> etiketi için etiketin en önemli özellikleri şunlardır:
- width Video penceresinin genişliğini belirtmek için ona ilettiğimiz sayı, genişliği piksel olarak temsil eder.
- height Video penceresinin uzunluğunu belirtmek için, ona ilettiğimiz sayı, piksel cinsinden uzunluğu temsil eder.
- control Video penceresindeki kontrol düğmelerini gösterir.
<source> etiketi için, etiketin en önemli özellikleri şunlardır:
- src görüntülenecek videonun yolunu belirtmek için.
- type Görüntülenecek videonun türünü belirtir.
Teknik Bilgiler
Görüntülenecek videonun boyutunu belirtmezseniz, tarayıcı videoyu yüklendikten sonra sayfada görüntülemeye çalıştığında büyük olasılıkla yanıp söner ve bir anda tüm sayfayı yeniden çizer, bu nedenle kullanıcı bunu bir flaş olarak görür.
Bu nedenle, ister HTML özellikleriyle ister CSS koduyla belirtseniz de, sayfada görüntülemeyi düşündüğünüz videonun boyutunu her zaman belirtin.
Sayfaya video eklemek
Aşağıdaki örnekte sayfaya bir video ekledik.
- <video src="https://src.k-html.com/video.mp4"/>
<video> etiketi herhangi bir oynatma denetimi göstermez, HTML, CSS ve JavaScript ile kendinizinkini oluşturabilirsiniz; Demek istediğim şey video çıkıyor ama çalışmıyor ve duraklatma, ses kilidi veya diğer ayarlar gibi herhangi bir kontrol butonunu göstermiyor ve bu tercihler css ve javascript kullanılarak oluşturulabiliyor ve html'de controls özelliği var.
- <video src="https://src.k-html.com/video.mp4" controls/>
Aşağıdaki örnekte, çalışmaması durumunda videonun bir yedek kopyasını ekledik.
<source> etiketi 2 kere ekledik sebebi daha önceden hazırladık 2 version vardır,
niye böyle yaptık?
tarayıcı ilk version açmayı denicek çalıştı ise video normal bir şekilde görüncek , ama birinci version çalışmadı ise ikinci version oynatmayı denicek,
burada .mp4 bir version ekledik ve .webm bir version ekledik
birinci version çalımadı ise sonraki version ounatmayı denicek
tabi kii version eklemekte zorunlulu değilsin ve bir tek version ekleye bilirsin
version eklemekte önenirim ve istediğin kadar version eklebilirsin
Tarayıcınız video etiketini desteklemiyor! Metini kullanıcının tarayıcısı ilk etapta video oynatmayı desteklemiyorsa sayfada görüntülenir. Tarayıcı yalnızca formatı desteklemiyorsa mesajın görüneceğini, ancak bu durumda gerekli videoyu bulamazsa, metni göstermeyeceğini ve yalnızca bir resmi de görüntüleyeceğini unutmayın.
- <video controls>
- <source src="https://src.k-html.com/video.mp4" type="video/mp4">
- <source src="https://src.k-html.com/video.webm" type="video/webm">
- Tarayıcınız video etiketini desteklemiyor!
- </video>
Aşağıdaki örnekte sayfaya video kontrol butonlarını gösteren ve genişliğinin 360 piksel ve uzunluğunun 200 piksel olduğunu belirten bir video ekledik.
- <video width="360" height="200" controls>
- <source src="https://src.k-html.com/video.mp4" type="video/mp4">
- <source src="https://src.k-html.com/video.webm" type="video/webm">
- Tarayıcınız video etiketini desteklemiyor!
- </video>
video etiketin özellikleri
preload
Preload özelliği, yazarın sayfa yüklendiğinde videonun yüklenmesi gerektiğini düşünüp düşünmediğini belirtir.
preload özelliği, yazarın tarayıcıya, en iyi kullanıcı deneyimine yol açacağını düşündüğü şey hakkında bir ipucu vermesini sağlar.
Not: autoplay özelliği varsa, preload özelliği yok sayılır.
preload özelliği Değerleri
- auto: sayfa yüklendiğinde tarayıcının tüm videoyu yüklemesi gerektiğini olması.
- metadata: sayfa yüklendiğinde tarayıcının yalnızca meta verileri yüklemesi gerektiğini olması
- none: sayfa yüklendiğinde tarayıcının videoyu yüklememesi gerektiğini olması
poster
Bu özellik, video yüklenene veya video oynatılana kadar video penceresinde bir görüntü görüntülemek için kullanılır.
- <video src="https://src.k-html.com/video.mp4" poster="https://src.k-html.com/poster.png" controls>
loop
Video dosyası yeniden oynatmayı bitirdiğinde videoyu tekrar oynatır.
- <video src="https://src.k-html.com/video.mp4" controls loop>
muted
Sesi kapatmak için kullanılır, böylece video dosyası yüklendiğinde ses varsayılan olarak kapatılmış olarak görünür.
- <video src="https://src.k-html.com/video.mp4" controls muted>
Videoyu otomatik olarak başlatmak
YouTube'da olduğu gibi sayfa açıldığında videonun otomatik olarak oynatılmasını istiyorsanız, bu özelliğin bazı telefonlarda çalışmadığına dikkat ederek <video> etiketine autoplay özelliğini ekleyebilirsiniz.
Aşağıdaki örnekte sayfaya bir video ekledik ve sayfa açıldığında otomatik olarak oynatılmasını ekledik.
- <video width="360" height"200" controls autoplay>
- <source src="https://src.k-html.com/video.mp4" type="video/mp4">
- <source src="https://src.k-html.com/video.webm" type="video/webm">
- Tarayıcınız video etiketini desteklemiyor!
- </video>