Siteye HTML5 ile VIDEO ekleme

Bir web sayfasına veya siteye HTML5 ile video eklemek çok kolay. Modern HTML5 ten önceki klasik html ile video dosyası eklemek mümkün olmakla birlikte çoğu video dosyası için tarayıcı (browser) eklenti (plugin) gereksinimi duymaktaydı. Yeni HTML 5 ile birçok tarayıcı sayfaya eklenen çoğu video formatını herhangi bir eklentiye ihtiyaç duymaksızın destekliyor ve tarayıcıda oynatabiliyor.

HTML5 ile sayfada video oynatabilmek için eklenmesi gereken kod ise <VIDEO> komutu.

HTML 5, <video> elementi ile sayfalara eklenecek  video dosyaları, Internet Explorer 9 ve üstü, Firefox, Opera, Chrome ve Safari tarayıcılarda sorunsuz şekilde izlenebiliyor. (IE 8 ve altındaki sürümler video elementini desteklemez).

HTML5 <video>komutu ile ekleyebileceğiniz video dosyaları ise şu an için MP4, WebM,  Ogg uzantılı medya dosyaları. (Şimdilik bunlar dışındakiler desteklenmiyor).

Sayfaya html 5 ile video dosyası eklemek için gerekli kodu <body> </body> etiketleri arasına eklemelisiniz… (video dosyalarının fiziksel adresini siz kendinize göre değiştirin).

Eklemeniz gereken örnek kod:

<video width=”320″ height=”240″ controls>
<source src=”videodosyasi.mp4″ type=”video/mp4″>
<source src=”filmdosyasi.ogg” type=”video/ogg”>
Tarayıcınız video komutunu desteklemiyor (Your browser does not support the video tag)
< /video>

 

HTML5 kod nasıl oluşturulur?

Tarayıcıların html5 kodlarını tanıması için sayfa kodunuzun başında

<!DOCTYPE HTML>

yazması gerekli ve yeterlidir…

Yani sayfa html kodu şu şekilde olmalıdır:

<!DOCTYPE HTML>

<html><body>

<video width=”320″ height=”240″ controls>

<source src=”film.mp4″ type=”video/mp4″>

<source src=”dizi.ogg” type=”video/ogg”>

</video>

</body>  </html>

VIDEO elementi ile eklenen videoların tarayıcıda kullanıcı tarafından kontrol edilebildiğini, yani durdur, başlat, büyük-küçük ekran gibi özellikleri kontrol edebileceğini hatırlatalım.

HTML 5 ile Desteklenen Video Formatları ve Browser (Tarayıcı) uygunluk şeması:

Şu anda <video> komutu ile desteklenen dosya türleri: MP4, WebM ve Ogg:

Browser MP4 WebM Ogg
Internet Explorer Evet Hayır Hayır
Chrome Evet Evet Evet
Firefox Evet – Firefox 21 – Windows 7, Windows 8,  Windows Vista, ve Android MP4 desteklemekte Evet Evet
Safari Evet Hayır Hayır
Opera Hayır Evet Evet
  • MP4 = MPEG 4 dosyaları; H264 video codec ve AAC audio codec.
  • WebM = WebM dosyaları;  VP8 video codec ve Vorbis audio codec.
  • Ogg = Ogg dosyaları; Theora video codec ve Vorbis audio codec.

MIME Tipleri için Video Formatları

Format MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 Video Etiketleri

Tag Açıklama
<video> Film veya video dosyasını tanımlar.
<source> Çoklu medya türlerini tanımlar. <video> ve <audio>
<track> Medya oynatıcılarda yazılı trakları (text tracks) tanımlar.
Bu yazı Kod kategorisine gönderilmiş ve , , , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.