HTML Videolar

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ılıyor.
Görüntülemek istediğimiz videoyu belirtmek için <source> etiketini kullanıyoruz.

Sayfaya video eklemek için HTML5, sayfaya video eklemenin iki yolunu sağlayabilir ve iki yöntem de esas olarak <video> etiketini kullanıyor.
Tek bir video, yani yalnızca bir video dosyası eklemek için <video> etiketini <video src="..."> olarak kullanabilirsin.
Üç noktayı video dosyasının yolu veya bağlantısıyla değiştirebilirsin.

Gösterilebilecek video türleri

Ekliyebildiğin video türleri .mp4, .webm ve .ogg tüm tarayıcılarda çalışır ve bununla, tarayıcıların herhangi bir eklentiye ihtiyaç olmadan bu tür video dosyalar çalışacaktır.

Kullanıcının cihazının zayıf olması ve sayfadaki videonun çözünürlüğünün çok yüksek olması tarayıcının video dosyasını çalıştırmayabilir olduğunu unutma.

Biraz önce bahsettiğim formüller tüm tarayıcılarda çalışıyor ancak bu video kullanıcının cihazında çalışacak anlamına gelmiyor.
Çok önemli bir şeye dikkat etmelisin, o da kullanıcının telefonunun veya bilgisayarının video dosya formatını desteklemeyebileceğidir.

Genel olarak .mp4 ve .webm kullanmanı öneririm.

Bu nedenle, oynatılabilecek video türlerinin yanı sıra, kullanıcı tarafından hangi videoların oynatılabileceğini belirlerken videoların çözünürlük bakılması gereken bir şeydir.

Genel olarak, 360p tüm kullanıcılarda çalışıyor ve, 720p çoğu kullanıcılarda çalışıyor.

Video etiketin özellikleri

<video> etiketi için etiketin en önemli özellikleri şunlardır:

width: Video penceresini Piksel olarak genişliğini belirtmek için kullanılıyor.
height: Video penceresini Piksel olarak uzunluğunun belirtmek için kullanılıyor.
control: Video penceresindeki kontrol düğmelerini göstermek için kullanılıyor.

<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 Bilgi

Görüntülenecek videonun boyutunu belirtmezsen, 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örebilir.

Bu nedenle, ister HTML özellikleriyle ister CSS koduyla belirtsen de, sayfada görüntülemeyi düşündüğün videonun boyutunu her zaman belirtmeyi unutma.

Sayfaya video eklemek

Aşağıdaki örnekte sayfaya bir video ekledim.

<video src="https://src.k-html.com/video.mp4"/>

kod dene

<video> etiketi herhangi bir oynatma denetimi göstermez, HTML, CSS ve JavaScript ile kendini oluşturabilirsin; Demek istediğim şey video çıkıyor ama çalışmıyor ve duraklatma, ses kilidi veya diğer ayarlar gibi herhangi bir kontrol düğmesi göstermiyor ve bu tercihler css ve javascript kullanılarak oluşturulabiliyor ve HTML5'de controls özelliği var.

<video src="https://src.k-html.com/video.mp4" controls/>

kod dene

Aşağıdaki örnekte, çalışmaması durumunda videonun bir yedek kopyasını ekledim.

<source> etiketi 2 kere ekledim sebebi daha önceden hazırladım 2 farklı kopya'dır. Niye böyle yaptım?
Çünkü tarayıcı ilk kopya açmayı denicek çalıştı ise video normal bir şekilde görüncek , ama birinci kopya çalışmadı ise ikinci kopya oynatmayı denicek.

Burada .mp4 bir kopya ekledim ve .webm bir kopya ekledim.
Birinci kopya çalımadı ise tarayıcı sonraki kopya oynatmayı denicek.
Tabi kii kopya eklemekte zorunlulu değilsin ve bir tek kopya ekleye bilirsin kopya eklemekte önenirim ve istediğin kadar kopya eklebilirsin

Tarayıcın 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 unutma.

<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>

kod dene

Aşağıdaki örnekte sayfaya video kontrol düğmeleri gösteren ve genişliğinin 360 piksel ve uzunluğunun 200 piksel olduğunu belirten bir video ekledim.

<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>

kod dene

Video etiketin özellikleri

<video> Etiketi için ekliyebildiğin farklı özellikler var, şu özellikleri aşağıda ekledim.

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 çalışmaz.

Preload özelliğin 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>

kod dene

loop

Video dosyası bittiğinde videoyu tekrar oynatır.

<video src="https://src.k-html.com/video.mp4" controls loop>

kod dene

muted

Sesi varsayılan olarak 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>

kod dene

Videoyu otomatik olarak başlatmak

YouTube'da olduğu gibi sayfa açıldığında videonun otomatik olarak oynatılmasını istiyorsan, bu özelliğin bazı telefonlarda çalışmadığına dikkat ederek <video> etiketine autoplay özelliğini ekleyebilirsin.

Aşağıdaki örnekte sayfaya bir video ekledim ve sayfa açıldığında otomatik olarak oynatılmasını ayarladım.

<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>

kod dene

önceki ders sonraki ders