HTML5 Video kullanımı

                HTML5’in getirdiği yeniliklerden bir tanesi ise, destekleyen tarayıcılar içerisinde herhangi bir dış kütüphaneye veya dosyaya gerek kalmadan video oynatabilme özelliği. 

Şu zamana kadar ismi bilinen çoğu sitenin kullandığı sistem Flash Player olarak adlandırabileceğimiz oynatıcılardı, fakat yeni teknolojilerle birlikte insanlar HTML5’in imkanlarından faydalanmayı tercih etmekteler. 

Bu noktada hem siteleri yapan ve kodlayan arkadaşlar zamandan tasarruf etmiş oluyor, hemde kullanıcılar için daha rahat ve erişilebilir sayfalar görüntülenebiliyor. 

Bu sistemle oluşturulan bir video sayfası ile flash player ile oluşturulmuş sayfaların açılma hızları arasında gözle görülür şekilde fark olabileceğini tahmin etmekteyiz. Bu konu aynı zamanda semantik kodlama ve arama motoru optimizasyonu (Seo) açısından da yararlı olacaktır diye düşünüyorum.

Anlatıma geçmeden önce yine diğer konularda bahsettiğim gibi her tarayıcının stabil etiketleri ve argümentleri yorumlayamadığını bilmeniz gerekmektedir. An itibariyle tüm video uzantılarını izleyebilme seçeneğini sunan tek tarayıcı Chrome olarak görünüyor, diğer tarayıcılar ise bazı uzantıların görüntülenmesine henüz destek verememekte.

Video elementini ekranda kullanıcılara sunabilmek için <video> etiketimizi kullanıyoruz. w3schools’da gösterilen örneğin bir benzerini sizlerle paylaşmak istiyorum.

<video width=”250″ height=”300″ controls=”controls”>
<source src=”video.mp4″ type=”video/mp4″>
<source src=”ses.ogg” type=”video/ogg”>


Buraya ise tarayıcı eğer HTML5 Video elementini desteklemiyorsa, görünmesini istediğiniz hata mesajını yazabilirsiniz.

</video>

Basit bir videoyu masaüstünde bir dosya oluşturarak test edebilirsiniz. Oluşan manzara karşısında sağ tıklayıp flash olmadığını görmek oldukça zevk verici.

Browser MP4 WebM Ogg
Internet Explorer 9 Evet Hayır Hayır
Firefox 4.0 Hayır Evet Evet
Google Chrome 6 Evet Evet Evet
Apple Safari 5 Evet Hayır Hayır
Opera 10.6 Hayır Evet Evet

Üst tarafta bulunan tabloda ise hangi ses ve video kategorilerinin, hangi tarayıcılar tarafından desteklendiği listelenmektedir. HTML5 ile profesyonel bir oynatıcının nasıl yapılacağına dair ayrı ve detaylı bir makale hazırlayacağım o nedenle bu konuyu fazla uzatmak istemedim, HTML5’li günler diliyorum.