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 (zamanında Macromedia yarattı bu teknolojiyi, daha sonra Adobe satın aldı) 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ı. Adobe 2020 sonunda Flash teknolojisine olan desteğini durdurdu, ama hem eski bilgisayarlarda hem de bazı şirket ortamlarında eski internet tarayıcıları ve Flash kombinasyonunu bulmak mümkün.
İ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 bir önemli dezavantajı var: <video> tag'i videoyu hangi formatta koymanız gerektiğini söylemiyor ve malesef "verimli" (yani, özellikle mobil cihazlarda daha az pil tüketen) formatlar malesef lisanslı, ve lisansı açık (ücretsiz) olan formatlar mobil cihazlarda verimli olmayabiliyor. 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 modern bilgisayarlarda, hem ticari hem de açık işletim sistemlerinde, hem de Apple'ın iOS cihazları ve diğer mobil cihazları desteklemek istiyorsanız o zaman çoklu format videonuzu HTML 5'in <video> tag'ini kullanarak Web sayfanıza eklemeniz gerekiyor gerekiyor, daha eski cihazlar veya "ne olur ne olmaz" durumu için de hala Flash'ı tutmak mümkün. İş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:
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: