Web sitenize nasıl video ekleyeceğinizi göstermeden önce, işin teorisini biraz anlatayım...

Bilgisayar dünyasında videolar, resimler, müzikler ve hatta yazılar ve diğer tüm dosyaların ayrı bir formatı var; aynı Dünya'daki değişik diller gibi. Video dosyaları için de bugüne kadar yüzlerce değişik format yaratıldı, ve bir dolu video oynatıcı programı değişik formatları okuyabiliyor... Bir Web sayfasında ise, video oynatıcı programımız Web sayfası.

Malesef Web sayfalarının standartları ile uğraşan kurum (W3C) bu konuyla ilgili çalışmaya son derece geç başladı, ve dolayısıyla Web sayfasına video eklemek için bir çok yol var:

İlk yöntem, Adobe Flash kullanmak. Flash, interneti gezmek için kullandığınız Web tarayıcısına eklenen bir program. 1996'dan beri piyasada olan bu teknolojiye 2002 yılında video desteği de eklendi, ve YouTube 2005 yılında ilk hizmete girdiğinde tüm videoları Flash teknolojisinin kullandığı video formatları ile yayınlamaya başladı.

İkinci yöntem ise HTML 5 ile gelen <video> tag'inin kullanmak. Apple'ın iOS cihazlarında Flash desteklememesi dolayısıyla kasım 2010'dan beri internette ağır ağır kullanılmaya başlayan bu yöntemin iki önemli dezavantajı var: birincisi, sadece bazı çok yeni internet tarayıcıları tarafından destekleniyor -özellikle Internet Explorer'ın sadece 10'uncu versiyonu (Windows 8 ile gelen versiyon) bu tag'i destekliyor; yani eğer sadece <video> tag'ini kullanırsanız ziyaretçilerinizin yaklaşık %25'i videolarınızı göremiyor. Daha da kötüsü (ikinci dezavantaj), <video> tag'i videoyu hangi formatta koymanız gerektiğini söylemiyor; dolayısıyla eğer videonuzun her tarayıcıda desteklenmesini istiyorsanız hem Theroa, hem H.264 (mp4) hem de VP8 olarak saklamanız gerekiyor.

Uzun lafın kısası: eğer videonuzun "normal" bilgisayarlarda görünmesi sizin için yeterli ise, hiç uğraşmadan Flash kullanmanız yeterli. Eğer hem "normal" bilgisayarları, hem Apple'ın iOS cihazlarını hem de diğer mobil cihazları desteklemek istiyorsanız o zaman videonuzun hem Flash hem de HTML 5'in <video> tag'ini kullanarak koymanız gerekiyor. İşte etaplar:

1) Videoyu uygun bir formatta saklayın: az önce yazdıklarıma bakılırsa burada işinizin zor olması bekleniyor; ama aslında durum o kadar vahim değil -Flash platformu H.264 (yani, mp4) videoları oynatabiliyor, aynı şekilde Flash'ın olmadığı mobil platformlar (Apple iOS ve diğerleri) da aynı şekilde mp4'leri oynatabiliyor. Videonuzu mp4'e çevirmek için ise tavsiyem Handbrake: handbrake.fr.

2) Video bilgilerini düzenleyin: standart olarak MPEG-4 videoların "metadata" denen kısmı, yani video uzunluğu, ismi, vs. dosyanın sonunda saklanıyor. Öte yandan, internetten bir dosya indirirken dosyanın ilk gelen kısmı dosyanın başı; dolayısıyla MPEG-4 videonuzun "hemen" izlenmeye başlaması için metadalarını dosyanın başına almanız gerekiyor. Bu işlem için kullanabileceğiniz bir program MP4 Metadata Mover.

3) MP4'ü okuyacak Flash player'ı kullanın: önceden dediğim üzere, MPEG-4'ün avantajı hem Flash player hem de Flash'ın olmadığı mobil platformlar (Apple iOS ve diğerleri) tarafından destekleniyor olması. MPEG-4'leri Flash'tan okuyabilmek için kullanabileceğiniz modülün adı ise Strobe Media Playback paketindeki StrobeMediaPlayback.swf dosyası.

4) Bütün bunları sayfanıza doğru bir şekilde JavaScript ile koyun: özetle, JavaScript'te yazmanız gereken mantık eğer kullanılabiliyorsa Flash'ı, Flash yoksa da HTML 5 videosunu açacak. Aynı zamanda, bonus olarak benim eklediğim mantık videonun otomatik olarak sayfanın boyurlarına uyum sağlaması -böylece eğer büyük bir videoyu ziyaretçileriniz küçük ekranlı bir telefondan izliyorsa rahatça görebilecekler: indirmek için buraya tıklayın.

Size sunduğum video.js dosyasının kullanımı ise basit: Fireworks isimli ve 958 * 540 çözünürlüğündeki bir videoyu sitenize şu basit kodla ekliyosunuz:

<script type="text/javascript" src="video.js"></script>
<script>video("Fireworks.mp4", "Fireworks.png", 958, 540)</script>


Bütün bunlarla uğraşmak yerine, diğer alternatifiniz ise YouTube'ü kullanmak. Bunun için videonuzu YouTube'e koyun ve de YouTube'ün "embed code" özelliğini kullanın. Örneğin:

<iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k" frameborder="0"></iframe>



İyi eğlenceler!