Hepimizin kısa bir anıya dalabilmesi için, klasik olarak bir web sitesine video nasıl entegre edilir örneği:
<object classid="clsid:d27cdb6e-ae6-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"> <param name="allowFullScreen" value="true" /> <param name="allowscriptaccess" value="always" /> <param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /> <param name="allowfullscreen" value="true" /> <embed type="application/x-shockwave-flash" width="425" height="344" src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"> </embed> </object>
Bu tür bir sözdizimi elbette ki pek hoş değildir.
Ancak estetik görüşü bir kenara bıraktığımızda dahi, bu sözdizimi şekli hata yapmaya çok meyillidir ve oldukça karmaşıktır. HTML5'te videoları daha kolay entegre etmek mümkündür. Bunun için video öğesi kullanılır.
İşte bu video öğesinin nasıl entegre edileceğine dair bir örnek:
<video src="video.ogv" width="300" height="200"> Maalesef tarayıcınız HTML5 uyumlu değil </video>
Bu, en basit formdaki yöntemdir. Ancak bu sözdizimi şeklindeki üç nitelik önemlidir. src ile entegre edilecek video belirtilir. Burada doğru yol belirlemeye dikkat edin.
width ve height nitelikleri video genişliğini ve yüksekliğini belirler. İkisinden biri belirtilmezse, video orijinal boyutunda gösterilir. Yalnızca bir tanesi belirtilirse, tarayıcı diğer değeri otomatik olarak hesaplar. autoplay niteliği, tarayıcıya sayfa yüklendiğinde videoyu otomatik olarak başlatmasını söyler. Bu nitelik genellikle belirtilmemelidir, çünkü kullanıcıların genellikle otomatik oynatım istemediği kabul edilir. Bu durum daha çok düşük bant genişliğine sahip mobil cihazlar kullanan kullanıcılar için geçerlidir.
Bir diğer ilginç nitelik controls'dür. Bu kullanıldığında, tarayıcıda oynatma ve ses kontrolü için yerel kontroller gösterilir.
<video src="video.ogv" width="300" height="200" controls> Maalesef tarayıcınız HTML5 uyumlu değil </video>
Tarayıcıdaki sonuç:
Görüntülenen çubuk aracılığıyla videoyu sadece durdurup yeniden başlatmakla kalmaz, aynı zamanda ses düzenini de içerir.
poster niteliği ile video başlayana kadar gösterilecek bir resim belirtebilirsiniz. Bunun için poster niteliği kullanılır.
<video src="video.ogv" width="300" height="200" poster="video.gif"> Maalesef tarayıcınız HTML5 uyumlu değil </video>
Burada da resmin gerçekten görüntülenebilmesi için doğru yol belirlemeye dikkat edin.
autoplay niteliğinin kullanımında dikkatli olunmalıdır. Çünkü bu nitelik, videoyun mevcut olduğu anda otomatik olarak oynatılmasını belirler.
<video src="video.ogv" width="300" height="200" autoplay> Maalesef tarayıcınız HTML5 uyumlu değil </video>
Trafik açısından preload niteliği ilgi çekici olabilir. Bu nitelik, ön yükleme davranışını kontrol eder. Bu niteliğin alabileceği değerler şunlardır:
• auto - Tarayıcı tüm dosyayı ön yükleyebilir.
• none - Dosya ön yüklenmesi gerekli değil.
• metadata - Dosya ön yüklenebilir.
preload niteliği eksik olduğunda, tarayıcıların varsayılan ayarları devreye girer.
Videolar ve Codec'ler
Web sitelerine video entegre etme ve oynatma konusunda ilgilenenler, farklı codec'lerle ilgili sorunla er ya da geç karşılaşacaktır. Bu codec'ler sayesinde videolar etkili bir şekilde sıkıştırılıp açılabilir. Buradaki sorun şudur: Tarayıcı üreticileri bugüne kadar ortak bir codec formatında anlaşamadılar. HTML5 (ve sonuç olarak sizin için) için bu, videolar ve ses dosyaları için tek tip codec'ler olmadığı anlamına gelir.
Videolar için Ogg ve MP4 formatları artık standart hale gelmiştir. Dolayısıyla bu iki formatta video sunulduğunda genellikle güvende olunur. Bunun için video öğesine iki source öğesi atandığını söyleyerek yapılır.
<video width="400" height="300" controls="controls">
<source src="video.mp4" type="video/mp4" />
<source src="video.ogg" type="video/ogg" />
</video>
Yani, video kaynağını video elemanı içinde belirtmiyorsunuz. Bunun yerine, sadece gösterimle ilgili genel bilgileri belirtiyorsunuz. Hangi videoyu göstermek istediğinizi source elemanıyla belirlersiniz. src özniteliğine ilgili videoyu atarsınız. type kısmından da video türünü veya videosunun hangi formatta olduğunu belirtirsiniz.
Birden fazla source elemanı belirtilmişse, tarayıcı her zaman "uygun" olan ilk videoyu oynatır. Bu "uygun" kavramının ne olduğu aşağıda açıklanmaktadır.
Peki aslında hangi tarayıcı hangi formata hakim? Bu sorunun cevabını aşağıdaki tablo sağlamaktadır.
| Tarayıcı | Ogg Theora (.ogg) | h.264 (.mp4) |
| Internet Explorer | Sürüm 9'dan itibaren | |
| Mozilla Firefox | Evet | |
| Google Chrome | Evet | Evet |
| Opera | Evet | |
| Safari | Evet | |
| iPhone | Evet | |
| Android | Evet |
Tablo, durumu açıkça gösteriyor: Biçimlerin yorumlanması hemen hemen tüm tarayıcılara eşit şekilde yayılmış durumda. Bu nedenle, genellikle videoları her iki formatta da belirtmek zorunda kalırsınız.media özniteliği, yalnızca source elemanına atanabilen; video için hangi medya türünün uygun olduğunu açıkça belirtmemizi sağlar. Belirli cihazlar için videoları belirtmek için, src elemanına media özniteliği atanmalıdır. Bu media özniteliğiyle istediğimiz medya türünü belirtiriz.
Bir source elemanının olası bir kullanımı şöyle olabilir:
<video width="400" height="300">
<!-- Sadece mobil cihazlar için -->
<source src="video_mobil.ogg" media="handheld" />
<!-- Diğer tüm cihazlar için -->
<source src="video_normal.ogg" media="all" />
</video>
Bu şekilde, media özniteliğine bakılarak mobil bir cihaz olup olmadığı kontrol edilir. Bu durumda, daha küçük boyutta bir video oynatılır. Farklı bir cihazsa, tüm değeri geçerlidir.
Videoları Güvenli Bir Şekilde Entegre Etme
HTML5'in, bilindiği gibi hala tüm tarayıcılarca desteklenmediği bilinmektedir. Bu durum tabii ki video elemanı için de geçerlidir. Bir çözüm, farklı entegrasyon tekniklerinin bir araya getirilmesidir. Bunun için eski tanıdık object ve embed elemanları video ile birleştirilir. Bunun bir örneği aşağıdaki gibi görünebilir:
<video width="640" height="360" src="http://www.youtube.com/v/mR5h_EXYKA0?fs" autobuffer controls poster="br.gif"> <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640" height="360" codebase="http://www.apple.com/qtactivex/qtplugin.cab" /> <param value="http://www.youtube.com/v/mR5h_EXYKA0?fs" /> <param value="true" /> <param value="false" /> <embed src="http://www.youtube.com/v/mR5h_EXYKA0?fs" width="640"height="360" autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object> </video>
Bu şekilde entegre edilen videolar, çoğu tarayıcıda oynatılabilir durumda olacaktır. video elemanını tanıyan tarayıcılar buna başvururken, diğer tarayıcılar object veya embed elemanlarındaki bilgileri kullanacaktır.
