Html5 Video Etiketi

 bcakir
 28 Aralık 2011

Html5 ile artık bir çok yeni etiket hayatımıza da girmiş oldu. Bunlardan bir tanesi de video etiketi. Bu yazımda Html5 video etiketini kullanmayı anlatacağım. Daha önceden plugin ile (flash, silverlight vs.) çalıştırmak zorunda kaldığımız videoları attık hiç bir eklentiye ihtiyaç duymadan çalıştırabileceğiz. Bu sizlere güzel bir durum gibi gelebilir fakat tarayıcıların destekledikleri video formatları aynı olmadığı için maalesef videoları farklı formatlara çevirme ve birkaç tane değişik uzantılı versiyonunu saklama yükü doğuruyor. Her ne kadar kötü bir durum olsa da ileride düzeleceğini düşünüyorum. Aksi halde flash ile rekabet etmeleri mümkün değil zaten. Neyse, biraz da yapacağımız uygulamadan bahsedeyim. Aynı uygulamayı iki farklı şekilde yapacağım. İlki JavaScript ile ikincisi ise Html5 ile olacak. Uygulamamızda tarayıcıların destekledikleri formatlara göre video göstereceğiz.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript ile Html5 Video Etiketi</title>
<script type="text/javascript">
window.onload = function(){
    if(navigator.appName != 'Microsoft Internet Explorer'){
        var element=document.createElement("source");
        element.setAttribute("type", "video/webm");
        element.setAttribute("src", "movie.webm");  
        document.querySelector('video').appendChild(element);        
    }else{
        var element=document.createElement("source");
        element.setAttribute("type", "video/mp4");
        element.setAttribute("src", "movie.mp4");  
        document.querySelector('video').appendChild(element);
    }
}
</script>
</head>
<body>
<video width="320" height="240" controls="controls"></video>
</body>
</html>

Yukarıda tarayıcıların destekledikleri formatlara göre video gösterilme işlemini yaptık ama bu uygulama Safari’de çalışmayacak. Ben bu tarayıcıyı kullanmadığım için isminin tam olarak ne olduğunu bilmiyorum. Eğer kullanacaksanız, Safari’ye uygun koşul kısmını siz eklersiniz. Şimdi bu uygulamayı Html5 ile yapalım.

<!DOCTYPE html>
<html>
<head>
<title>Html5 Video Etiketi</title>
</head>
<body>
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  Tarayıcınız video formatını desteklemiyor.
</video>
</body>
</html>

Yukarıda ise video etiketinin içerisine bütün video formatlarını koyarak çok kolayca uygulamamızı yaptık. Siz istediğinizi seçip (bence ikinciyi seçeceksiniz) kullanabilirsiniz. Bu uygulamayı çalıştırmak için uygun video formatlarına çevirme (convert) işlemini yapmayı unutmayın. Son olarak tarayıcıların destekledikleri video formatlarını da vererek yazımı burada tamamlıyorum. Yararlı olması dileğiyle.

TarAYICI 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
 676 Okunma

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Html/Html5, JavaScript
Kapat