Html 5 Video Özelliği

Normal de Html'nin eski versiyonlarında sayfa içerisinde bulunan videoyu gösterebilmek için FlashPlayer gibi eklentilerin tarayıcı içersinde olması gerekmekteydi. Bu eklentiler yardımıyla sayfamızdaki videoları yürütebiliyorduk.

HTML 5 ile gelen bu yeni özellik sayesinde hiç bir eklentiye gerek kalmadan sayfamızda ki videolarımızı tarayıcılarda gösterebiliyoruz. Ancak video bileşenlerinin farklılıkları tarayıcıların kendilerini yenilemeleri gerektiği için bazı türdeki video bileşenleri bize sorun çıkarabilir. H264 (mp4) video bileşenine sahip videomuz sorunsuz olarak tarayıcılarımız da çalışacaktır.

Peki Html 5 ile gelen bu video özelliğini nasıl kullanabiliriz. 

Sitemizin kök klasörüne attığımız MP4 özelliğindeki videomuzu HTML 5 ile gelen yenilik ile eklentisiz olarak sayfamıza ekleyelim. Bunu nasıl yapacağımıza gelirsek.

Sayfamızda istediğimiz bir alana aşağıdaki gibi kodlarımızı ekleyerek işlemimizi gerçekleştirebiliriz.

<video src="_/klasör/videoismi.mp4">

</video>

Kodlama bu kadar basit.

Burada kırmızı renkle yazılan yer bizim videomuzun yoludur. Hangi klasörde hangi dosyanın açılacağını belirtiyoruz.

Peki videomuzun bizim istediğimiz yükseklikte ve genişlikte olmasını istersek kodlarımıza bir kaç ekleme yaparak istediğimiz ölçülere gelmesini sağlayabiliriz.

Ekleyeceğimiz kodlar ise width ve height kodlarıdır. Peki bunları nasıl ekleyebiliriz.

<video src="_/klasör/videoismi.mp4" width="500" height="500">
</video>
Bu sayede Videomuz 500px yüksekliğinde(height) ve 500px genişliğinde(width) sayfamızda bulunacaktır.

Videomuza birde istendiğinde durdurup sonra tekrar oynatabilmek için kontrol butonlarınında eklenmesini ve videomuz üzerinde görülmesini istersek eklememiz gereken kod controls olacaktır. HTML in eski sürümlerinde bu controls kodunun hemen sonuna ="true" yazmamız gerekiyordu. Fakat HTML 5 in bize verdiği kolaylık sayesinde ="true" yazmamıza gerek kalmıyor.

Sonuç olarak videomuzu kendi belirlediğimiz yükseklik ve genişlikler ile ve üzerinde kontrol butonlarının görünmesini sağlayarak eklemek istediğimizde yazacağımız kod şu şekilde olacaktır.

<video src="_/klasör/videoismi.mp4" width="500" height="500" controls>
</video>