Bloglarının ilkinde bilgisayar uzmanı , web geliştiricisi Ian Devlin HTML5 ile web sitenize nasıl video ekleyeceğinizi açıklar
chrome'da favoriler nasıl kaydedilir
Muhtemelen HTML5'in en büyük ve en çok konuşulan özelliği gömülü videodur. Şu anda web sitenize video içeriği eklemenin tek yöntemi Flash, QuickTime veya RealPlayer gibi bir üçüncü taraf eklentisidir. HTML5'in şafağı ve video öğesiyle birlikte, video desteğinin web tarayıcısı tarafından ele alınması ve herhangi bir üçüncü taraf desteğine duyulan ihtiyacı ortadan kaldırmasıyla birlikte bu tamamen değişecek.
Birkaç web tarayıcısı zaten HTML5 için destek sunuyor. Burada, eklentisiz videoyu sitenize nasıl yerleştirebileceğinizi ve karşılaşacağınız sorunları açıklayacağız.
Dosya türleri ve tarayıcı uyumluluğu
Başlangıç olarak, HTML5'te desteklenen farklı video dosyası türlerine kısaca göz atacağız. Bunlar Theora OGG ve H.264'tür (.mp4). Farklı tarayıcılar farklı türleri destekler ve bazıları hiçbirini desteklemez. Aşağıdaki tablo bunu gösterir:
| Theora OGG | H.264 (mp4) | |
|---|---|---|
| Firefox 3.5+ | ✓ | x |
| Krom 3+ | ✓ | ✓ |
| Safari 3+ | x | ✓ |
| Opera 10.5+ | ✓ | x |
| Internet Explorer 8 | x | x |
| Internet Explorer 9 | x | ✓ |
| iPhone | x | ✓ |
| Android | x | ✓ |
Codec'ler ve diğer teknik sorunlar
HTML5'in kendisi kullanılacak bir video codec bileşeni belirtmez ve bu, hangisinin olduğu konusunda tartışmalara yol açmıştır. web için kullanmak için en iyisi . Dolayısıyla tüm tarayıcıları kapsamak için her iki codec bileşenini de desteklememiz gerekiyor.
Ve sonra elbette Internet Explorer var. Şu anda, Internet Explorer'ın yayınlanan sürümlerinden hiçbiri video öğesini desteklememektedir ve video oynatmak için hala bir eklenti gereklidir. Bu, Internet Explorer 9'un piyasaya sürülmesiyle (muhtemelen gelecek yılın başlarında), H.264'ün diğer birçok HTML5 özelliğiyle birlikte destekleneceği zaman değişecek.
Nasıl olduğunu merak ediyorsanız, video dosyalarınızı OGG'ye dönüştürebilirsiniz (Theora OGG türü hakkında daha fazla bilgiyi şuradan okuyabilirsiniz: TheoraYemek Kitabı ) kullanarak dosyalar Miro Video Dönüştürücü .
Video öğesi ve kodekler hakkında daha ayrıntılı bilgi için şuraya gidin: html5'e dalın: web'de video Mark Pilgrim tarafından.
HTML5 kodu
Şimdi asıl HTML5 koduna ve bu şeyi nasıl çalıştırabileceğimize geçiyoruz. HTML5 bize web sayfalarımıza video eklemek için kullanabileceğimiz iki yeni öğe sağlıyor: |_+_| daha önce bahsettiğimiz öğe ve |__+_| öğe. Bunların her birine sırayla bakalım.
eleman
Video öğesi aşağıdaki özelliklere sahip olabilir:
| öznitelik | Açıklama |
|---|---|
| kaynak | video dosyasının kendisine geçerli bir URL |
| otomatik oynatma | videonun otomatik olarak oynatılıp oynatılmayacağını belirten bir boole |
| kontroller | varsayılan medya kontrollerinin tarayıcı tarafından görüntülenmesi gerektiğini belirten bir boole |
| döngü | videonun tekrar tekrar oynatılıp oynatılmayacağını belirten bir boole |
| ön yükleme | tarayıcıya, videonun kendisinin önceden indirilmesinin gerekli olup olmadığını veya tek başına meta verinin gerekli olup olmadığını belirtir. Olası değerler şunlardır:
|
| afiş | kullanılabilir video verisi olmadığında görüntülenecek bir resim dosyasının URL'si |
| Genişlik | videonun genişliği, CSS pikselleri |
| yükseklik | videonun yüksekliği, CSS piksel cinsinden |
Buradan, yalnızca video öğesini kullanarak bir OGG videosunu web sitenize yerleştirmenin ne kadar kolay olduğu görülebilir:
Gerçekten hepsi bu kadar.
Theora OGG formatını destekleyen herhangi bir tarayıcı artık videonuzu daha fazla uzatmadan başarıyla görüntülemeli ve oynatmalıdır. Tabii bu kadar kolay değil çünkü yukarıdaki tablodan da gördüğümüz gibi kod sadece Firefox, Chrome ve Opera'da çalışacaktı. Dolayısıyla H.264'e de bir geri dönüş yapmamız gerekiyor. Bu, |__+_| video öğesi için birden çok medya kaynağı tanımlamamızı sağlayan öğe.
bir twitch yayıncısının kaç abonesi olduğunu nasıl görebilirim
eleman
Kaynak öğe aşağıdaki özelliklere sahiptir:
| öznitelik | Açıklama |
|---|---|
| kaynak | medya (bu durumda video) dosyasının kendisine geçerli bir URL |
| tip | olması gereken medya dosyasının türü MIME türü , Örneğin. |_+_| bunun bir Theora OGG videosu olduğunu belirtir ve |_+_| kullanarak tarayıcının videoyu nasıl oynatacağına karar vermesine yardımcı olması için MIME codec bileşenini de sağlayabilirsiniz. |
| yarım | medya kaynağının amaçlanan medya türünü verir ve geçerli olmalıdır medya sorgusu , Örneğin. |_+_| videonun elde taşınabilir cihazlar için uygun olduğunu belirtir veya |__+_| bu, videonun 720 piksel veya daha büyük ekranlar için uygun olduğunu gösterir. |
Not: kaynak öğenin geçersiz olduğunu ve bir başlangıç etiketi olduğunu ancak kapanış etiketi olmadığını
Kaynak öğeyle ilgili en yararlı şey, onu farklı dosya türlerini yığmak için kullanabilmemiz ve tarayıcının oynayabileceği bir dosya bulana kadar sırayla her birini denemesine olanak tanımamızdır.
kullanma ve birlikte
Video öğesi içinde farklı türlerdeki videoları yığınlamak için kodu aşağıdaki gibi giriyoruz:
Yukarıdaki kod, yukarıda belirtilen mesajı görüntüleyen Internet Explorer dışındaki tüm tarayıcılarda çalışacaktır.
Hem Theora OGG hem de MP4 formatında bir kelebeğin örnek videosunu içeren HTML5 Test Video sayfasını görüntüleyerek bunu kendiniz test edebilirsiniz. Android ahize, onu görüntüleyebilmelisiniz.
Aranızdaki keskin bıçaklar, aşağıdaki kodu kullanarak, bu video mesajını göremiyorsunuz diye özür dilemek yerine, bu yığınlamadan yararlanabileceğimizi ve altta Flash'a (veya başka bir eklentiye) geri dönüş yapabileceğimizi fark edecekler. :
Sonuç
Çoğu HTML5 öğesinde olduğu gibi, kaynak ve video öğeleri için tarayıcı desteği şu anda düzensizdir. Ayrıca şu anda kaynak öğenin, web sitelerine video içeriği eklemenin en popüler yöntemi olan Flash kullanımını öldürüp öldürmeyeceği konusunda büyük bir tartışma var. Flash'ı tamamen öldüreceğinden emin değilim, ancak yine de burada kalacağını ve web geliştiricilerine video gömmek için daha temiz ve daha kolay bir yaklaşım sağlayacağını söylemek doğru olur.