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.

 

MP4 WebM Ogg
Internet Explorer YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES (from Opera 25) YES YES

 

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.

 

Dosya Formatı Medya Tipi
MP4 video/mp4
WebM video/webm
Ogg video/ogg

 

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>

<soruce="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.

Gökmen Efsun {efsungokmen}

Teknoloji dünyası sınırsız bir alandır. Bu alanda bilgi paylaştıkça çoğalır.

“HTML5 Video Oynatma ve Özellikleri” üzerine 1 yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir