HTML5 Video Oynatma ve Özellikleri

HTML5 ile oluşturacağımız internet sitelerine bazı durumlarda videolar eklememiz gerekebilir. Böyle durumlarda ise video ekleyeceğimiz için ise HTML5 ‘in media player ‘ını kullanarak buna çeşitli kontroller ekleyebilmek mümkündür.

Bunun için ise internet sitenize HTML5 video ekleme işlemini gerçekleştirerek sitenizin dizininde bulunduğu videoları çalıştırabilir hale geleceksiniz demektir. Videolara ekleyeceğiniz bazı özellikler sayesinde de otomatik başlama duraklatma indirme gibi özellikleri ekleyebilmek mümkün olacaktır.

HTML5 Video Oynatma

Öncelikle bilmemiz gereken tek şey istediğimiz her video uzantısını istediğimiz şekilde ekleyemiyor oluşumuzdur. Bunun için ise bizlere HTML5 ‘in desteklemiş olduğu video formatlarını ekleyip tarayıcıda çalıştırabilme imkanı sunulmaktadır. Öncelikle başlayacak olursak hangi tarayıcının hangi formatları desteklediğine bir göz atalım.

Yukarıda görüldüğü üzere temel olarak en çok desteklenen video formatı MP4 ‘tür. HTML5 ile oluşturmuş olduğumuz internet sitemize bir video ekler iken dikkat etmemiz gereken en önemli noktanın aslında video formatının tüm tarayıcılarda eksiksiz çalışabilmesini istiyorsak en çok MP4 ‘ü tercih etmeliyiz.

Hangi tarayıcıların hangi video formatlarını desteklediğine göz attıktan sonrasında hangi videoyu ne şekilde eklememiz gerektiğine bir göz atmanın sırası da geliyor aslında.

Yukarıda görüldüğü üzere bizler bazı dosya formatında ki videoları eklerken kullanmamız gereken işlem video olduğunu belirtmek ve hangi dosya tipinde olduğunu belirtmek olacaktır.

<video>

<source="intro.mp4 type="video/mp4">

</video>

Yukarıda görüldüğü şekilde biz temel olarak videomuzu bu şekilde HTML yapılı internet sayfamızın içine ekleyebilmekteyiz. Fakat biz bunlara temel farklı özellikler eklemek istiyorsak örneğin HTML5 video otomatik oynatma gibi özellikler istiyor isek bu seferde :

<video autoplay>

<soruce="intro.mp4 type="video/mp4">

</video>

Yukarıda görüldüğü üzere kullanmış olduğum etiket sayesinde otomatik başlatma işlemini gerçekleştirmiş olacaksınız. Fakat biz kullanıcının eğer ki videoyu oynatmasını, durdurmasını, ses açıp kapatması, tam ekrana alma gibi işlemleri yapabilmesini istiyorsak bu sefer ise :

<video controls>

<soruce="intro.mp4 type="video/mp4">

</video>

Yukarıda yer alan özelliği kullanmış bulunuyoruz. Bu sayede HTML5 ile oluşturulan bir internet sayfasına video ekleme işlemini gerçekleştirmiş olacağız. Eklediğimiz bu videoya ise durdurma, devam ettirirme, ses açma ve kapatma, tam ekrana alma gibi kontrolleride otomatik olarak eklemiş bulunacağız. Bunun haricinde ise video etiketinin içine css olarak istediklerinizden bir kaçını ekleyebileceğiniz gibi boyut ayarlaması da yapabilmeniz mümkündür.