HTML5 Videolar Tasarımcıların Bilmesi Gereken 10 Şey

HTML5 devrimi, dünyanın her yerinden gelen heyecan verici web tasarımcılarıdır. Yeni özellikler, anlamsal web siteleri oluşturmak için düzinelerce öğeyi ve özelliği desteklemektedir. Bu yeni özellikler ses ve video formatları için multimedya etiketleri içerir.

Geçtiğimiz yıllarda, Flash tabanlı bir medya oynatıcı Web'de yayın yapmak için fazlasıyla yeterli ve bu teknolojiyi eski tarayıcıları desteklemek için hala gerekli. Ancak, neyse ki modern standartlar gelişti ve HTML5 videonun eklenmesi onlarca yeni fırsat için kapılar açıyor.

Bu kılavuzda, Web için HTML5 videoya bir giriş yapmak istiyorum. Yerli tarayıcı içi oynatıcıyı ve tüm işlevlerini anlamak biraz pratik gerektirecektir. Ve aşina olmanın en iyi yolu, önce kafaya dalmaktır.!

1. Medya Türleri

Bir flash video oynatıcıyla çalışırken, tüm video formatlarını .flv ile ilişkilendirmek çok yaygındır. Bu işe yaramasına rağmen, çoğu flv dosyası daha gelişmiş dosya formatları / codec bileşenlerinin yakınında hiçbir yerde kaliteyi koruyamaz. HTML5 tarafından desteklenen 3 önemli video türü vardır: MP4, WebM ve Ogg / Ogv. MPEG-4 dosya tipi genellikle üçüncü taraf Flash oynatıcılarda oynatmaya izin veren H.264'te kodlanmıştır. Bu, bir geri dönüş yöntemini desteklemek için bir .flv video kopyasını saklamanıza gerek olmadığı anlamına gelir! WebM ve Ogg, HTML5 video ile ilgili iki daha yeni dosya türüdür. Ogg, açık kaynaklı standart ses dosyası formatına dayanan Theora kodlamasını kullanır. Bunlar bir .ogg veya .ogv uzantısı ile kaydedilebilir.

WebM, Google tarafından yürütülen ve WebM Projesi web sitesinde daha fazla bilgi edinebileceğiniz bir projedir. Bu biçim zaten Opera, Google Chrome, Firefox 4+ ve en son Internet Explorer 9 tarafından desteklenmektedir. Çoğu web profesyoneli tarafından hala bilinmemektedir, ancak WebM, web videosunun geleceği için önde gelen video medya biçimidir..

2. Tarayıcı Desteği

Peki, web siteniz için bu dosya türlerinden hangisine ihtiyacınız var? Tam olarak ideal 3, tam destek yelpazesini sağladıkları için mükemmel olur. Oysa bu gerçekçi değildir ve aslında tüm üsleri yalnızca ikisiyle kapatabilirsiniz. Her tarayıcı için neyin işe yaradığını gösteren bir döküm:

• Mozilla Firefox - WebM, Ogg
• Google Chrome - WebM, Ogg
• Opera - WebM, Ogg
• Safari - MP4
• Internet Explorer 9 - MP4
• Internet Explorer 6-8 - HTML5 Yok, Sadece Flash!

Hatırlarsanız, daha önce birçok flash video oynatıcının H.264'te kodlandıkları sürece MP4 dosyalarını destekleyeceğini söyledim. Bu nedenle, bu tarayıcıların her biri son çare olarak MP4 + Flash'ı gömecektir. Bu, yalnızca oluşturmanız gereken anlamına gelir iki tüm tarayıcıları desteklemek için farklı video formatları. Safari / IE9 için MP4 ve geri kalanı için WebM veya Ogg seçenekleri.

Bence WebM formatına bağlı kalmanızı şiddetle tavsiye ederim. Projenin arkasında bazı büyük isimler var (yani Google) ve HTML5 topluluğunda çok çekiş kazandı. Ogg / Ogv desteklenecek, ancak büyük olasılıkla WebM'in daha küçük dosya boyutlarındaki popülerliğinden kaybolacak. İlgili videoyu, Sean Golliher tarafından yazılan web'deki videonun geleceği hakkında okuyabilirsiniz..

3. Basit HTML5 Videolarını Katıştırma

Şimdi bazı örnek kodları gömmek için gereken sözdizimine bakalım. Tek ihtiyacımız olan, her film URL’sine başvuruda bulunmak için HTML5 video etiketi..

Dikkat kontroller ve otomatik oynatma niteliklerin herhangi bir değerle ayarlanması gerekmez. Ben de dahil afiş Akıştan önce görüntüyü video oynatıcı üzerinde önceden yükleyen özellik. Bu, birçok web oynatıcı ile ortak bir önizleme.

Video öğesinde dahili olarak hem MP4 hem de WebM formatlarını sunuyoruz. Bunlardan hiçbiri yüklenemezse, kullanıcının tarayıcılarını güncellemesi için bir hata görüntüleriz.

4. Bir Flash Fallback Sunulması

Yukarıdaki örnek, tüm standartlara uyumlu web tarayıcıları için mükemmeldir. Yine de, dünyanın her zaman teknolojinin en üst noktasında olmadığını düşünmemiz gerekir. Kullanıcıları daha eski Safari, Mozilla Firefox ve özellikle Internet Explorer sürümlerinde desteklememiz gerekiyor.

Bunu başarmanın en iyi yolu bir Flash geri dönüş oynatıcısıdır. Bunlar kullanılarak eklenebilir Göm veya nesne üçüncü taraf .swf dosyasına başvuruda bulunmak için etiketler. JW Player ve Flowplayer, düşünebileceğiniz iki ücretsiz açık kaynaklı çözümdür. Ayrıca ActiveDen'de 15 $ - 20 $ gibi ucuza gidebilecek premium video oynatıcılara da göz atın.

Şimdi var olan hemen hemen her tarayıcıyı destekleyen bir geri dönüş Flash oynatıcısı eklemek için yukarıdaki kodu ayarlayalım.

5. Mobil Cihaz Desteği

Mobil endüstri çok genç olduğu için bu konu hala tartışılmaktadır. Apple, Mac ve iOS cihazlarda MP4 desteğiyle çıktı. Bu, standart video kullanıcı arayüzünde iPad, iPhone veya iPod Touch'ınızdaki .mp4 video dosyalarını yerel olarak aktarabileceğiniz anlamına gelir. Bu, pazar payının çoğunu kapsar.

Son zamanlarda Android cihazlar aynı destek seviyesine ulaşmakta zorlanıyorlardı. Ancak Google, nihayet artık tüm mobil kullanıcılardan faydalanan .mp4 web akışını benimsemiştir. Flash burada bir seçenek olmadığı için MP4 mevcut en iyi çözümdür. Bu yüzden ilk .mp4 kodunu yerleştirmek istiyorsunuz, böylece iOS cihazları dosyayı hemen tanıyabilir..

6. Safari Kullanıcı Aracısı

Bahsetmesi gereken bir hata, Flash oynatıcılar ile Safari'de doğal HTML5 .mp4 akışı arasında var olanıdır. Tarayıcı her iki dosyayı da destekleyebildiğinden, HTML5 video akışını Flash yerine almakta sorun yaşayabilirsiniz. Ancak TUAW’daki bu harika blog yazısı sayesinde göz atma kullanıcı acentanızı değiştirmek kolaydır.

Bu, web sayfanızı tarayıcının başka bir cihazda çalıştığını tanıması için zorlar. Büyük olasılıkla herhangi bir Flash oynatmayı desteklemeyen iPad'i seçersiniz. Bu, MP4 yerel ve flaş oynatma yöntemlerini test ederken karşılaşabileceğiniz tek önemli konudur..

7. Oyuncu Kontrollerini Yönet

İster inanın ister inanmayın, HTML5 video oynatıcı kontrollerini değiştirmek için kullanabileceğiniz yöntemler de var. Hepsi bir dizi açık yöntemden çekerek JavaScript'te yapılabilir. Burada listelenecek çok fazla şey var, ancak daha fazla ayrıntı için W3C ortam öğesi belgelerinde gezinmeyi deneyin.

Genel bir fikir vermek için, Opera dev blogu yeni başlayanlar için harika olan bazı kısa dersler yayınladı. Daha önce JavaScript ya da jQuery'i daha önce hiç seçmemiş olsanız bile, bununla çalışan zemine ulaşmak daha kolaydır. Video ortamının belirli özellikleri hakkında arama yapabilirsiniz. sessiz veya şimdiki zaman. Sonra DOM'yi jQuery'de manipüle ederek bu kriterleri temel alarak eylemler gerçekleştirebilir (arka planı karartıp, reklamları gösterebilir)..

Opera makalesindeki aynı geliştirici, betikli video oynatıcılarının çalışma demosunu sunuyor. Kendi UI kontrollerinizi kişiselleştirme fırsatı olağanüstüdür. Sadece HTML5 videonun ne kadar güçlü olduğunu ortaya koyuyor.

8. Video Format Dönüştürme

Bu, daha az teknolojiye duyarlı kişilerin kafasını karıştıracak bir başka büyük konudur. Sadece web sitenizi yayınlamak ve izlemek istiyorsunuz ve şimdi video dönüştürme ile baş etmek zorundasınız. Aslında o kadar da zor değil.

En büyük önceliğiniz olan MP4 ile başa çıkmak için, 3 ana işletim sisteminin tamamında çalışan ücretsiz, açık kaynaklı bir çözüm olan HandBrake'i kullanabilirsiniz. H.264'ü, birkaç diğer codec bileşeni ile birlikte destekleyerek, freebie kullanıcıları için en iyi seçenek haline getirecek. Eğer kazanacak paranız varsa, Mac App Store'da bulunan ve sadece 40 $ 'lık bir lisans için Xilisoft çeviricisini önermeliyim..

WebM yolu, hayatı çok daha kolay hale getiriyor gibi görünüyor. Miro Video Converter, mükemmel kalitede WebM dosyaları üreten Windows ve OS X için ücretsiz bir araçtır. Aynı zamanda oldukça iyi kalitede çıkan Ogg Theora kodlamasını da yapabilir..

9. Bir Web Oynatıcı Oluşturma

HTML5 özellikli video formatları geliştiriciler için hala yeni. Özel kontroller, kaydırıcılar, yürütme / duraklatma simgeleri, vb. İçin izin vermek için sadece oynanmayı bekleyen açık protokoller var..

Kod, yeni gelenler için biraz yoğundur, çünkü gelişmiş CSS hedeflemesi ve bir miktar resmi jQuery gerektirir. Özelleştirilmiş bir oyuncu tasarımı sunan, üzerine inşa edebileceğiniz başka çerçeveler de var. Benzer şekilde, bu slayt gösterimi sunumu bir HTML5 video oynatıcı oluşturmak için harika bir giriş.

10. VideoJS Kütüphanesi

VideoJS muhtemelen HTML5 video oynatıcılar için en sevdiğim çözüm. İhtiyacınız olan tek şey belgenizin herhangi bir yerinde bulunan kendi barındırdıkları JavaScript ve CSS stil sayfası. Daha sonra standart HTML5 video kodunu, skinning için bazı ek sınıflarla yazıyorsunuz. Örnek kodlarını aşağıya ekledim:

Bir WordPress blogu çalıştırıyorsanız, onların özel WP eklentisini de deneyebilirsiniz. HTML5 videosunu görüntülediğiniz sayfalarda otomatik olarak js / css kütüphanesini içerecektir. Ve kısa kodları kullanarak herhangi bir yazı veya sayfa düzenleyiciden bunu yapabilirsiniz (buraya bakın).

Sonuç

Umarım bu tanıtım rehberi web videosunun geleceğine olan ilginizi artırabilir. Cep telefonuna daha fazla kullanıcı girdiğinde, bu tür ortamlar için HTML5 standartlarının benimsenmesi önemlidir. Web geliştiricilerin daha hızlı bir şekilde tam destekli çözümler üretebilmesi için daha basit hale getirilmelidir. HTML5 videonun geleceği için fikirlerinizi ve önerilerinizi duymak isteriz. Paylaşmak istiyorsanız, lütfen aşağıdaki tartışma alanını yazın..