İçerik
- Şimdi neredeyiz
- Multimedya altyazı ve altyazı
- WebVTT
- Tam ekran video
- Medya öğelerini senkronize etme
- Kamera ve mikrofona erişim
- WebRTC
Bu makale ilk olarak web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olan .net dergisinin 224. sayısında yayınlandı.
HTML5, yerel multimedyayı tarayıcılara getirir. Eski günlerde, video ve ses üçüncü taraf eklentilerine (her cihaz veya işletim sistemi için mevcut olmayabilir) aktarılıyordu. Bir tarayıcı ve bir eklenti arasındaki iletişim sınırlıdır ve bu nedenle multimedya çok büyük bir kara kutuydu.
Ardından HTML5 geldi. IE ve Safari yalnızca telif hakkına tabi kodekleri desteklediğinden, medyanızı çift kodlama ihtiyacına rağmen, tüm büyük tarayıcılar yerel video ve sesi (Internet Explorer dahil) destekler.
Birdenbire, video CSS ile şekillendirilebilir - yarı saydam videoları birbirinin üzerine bindirebilir, kenarlıklar ve arka plan görüntüleri ayarlayabilir, geçişler ve dönüştürmelerle ve diğer her türlü harikayla fareyle üzerine gelindiğinde döndürebilirsiniz.
Vadim Makeev ile yazdığım makaleyi okursanız, hem ses hem de videonun JavaScript'ten oynatmayı kontrol etmek için kullanabileceğiniz basit API'lere sahip olduğunu da bilirsiniz. Görünümünüzün gerektirdiği kadar karmaşık veya basit bazı basit JavaScript ve CSS ile kendi medya oynatıcınızı oluşturabilirsiniz.
Şimdi neredeyiz
Zaten, o halde, yerel multimedya oldukça harika görünüyor. Elbette tam olarak olgun değil; tarayıcılar iki yıldan daha kısa bir süredir medya oynatıcıları iken, masaüstü medya oynatıcı programlarının geliştiricileri 15 yıla kadar programlarını mükemmelleştiriyorlar.
Birçoğu, çoğu tarayıcının oldukça gecikmeli ses çalma özelliğine sahip olduğunu fark etti. Bazı tarayıcıların bir HTML5 ses dosyasını tetiklemesi iki saniye sürebileceğinden, oyun geliştiricileri genellikle Flash'ın geri kalan kullanımının ses için olduğunu söyler. Patrick Lauke, döngüden önce küçük bir gecikmeye sahip olmayan döngüsel bir sesi hackleyerek belgeler.
Remy Sharp, Audio Sprites adını verdiği bir teknikle iOS'taki eksikliklerin üstesinden nasıl geldiğini belgeledi. İOS dünyasının başka yerlerinde, okunması gerekenler, iPad'deki HTML5 video sorunları ve bunların nasıl çözüleceği ve iOS'ta Çözülmemiş HTML5 video sorunlarıdır.
Elbette bunlar spesifikasyon problemlerinden ziyade uygulama detaylarıdır, bu nedenle platformlar olgunlaştıkça bu sorunların çoğunun ortadan kalktığını göreceğiz.
Artık nerede olduğumuzu biliyoruz, şimdi ne olacağına bakalım.
Multimedya altyazı ve altyazı
Web'de daha fazla içerik video veya seste yer aldıkça, film müziğini duyamayan veya İngilizcenin anadili olmadığı için hem okumak hem dinlemek isteyenler veya altyazıları kendi dillerinde okumak istiyor.
Yakında yakınınızdaki tarayıcılarda, HTML5'in gücüyle altyazılar ve altyazılar geliyor parça> Bir metin dosyasını ve zamanlama bilgilerini bir medya dosyasıyla senkronize ederek metni doğru zamanda görüntüleyen öğesi. Bu güçlü öğe, videonun çocuğu olarak yaşar> veya ses> öğesi ve bir altyazı dosyasına işaret eder.
Bazı özelliklerine bir göz atalım:
track src = subtitles.vtt kind = subtitles srclang = tr label = "İngilizce">
Src niteliği, harici zamanlanmış metin izlerine işaret eder. Tür niteliği, tarayıcıya bunların altyazılar mı (diyalog yazılır ve muhtemelen tercüme edilir, çünkü aksi takdirde anlaşılmayacaktır), altyazılar (diyaloğun transkripsiyonu veya çevirisi, ses efektleri, müzik ipuçları ve ne zaman için uygun olan diğer ilgili ses bilgileri) ses mevcut değil veya açıkça duyulmuyor), açıklamalar (medya kaynağının video bileşeninin metinsel açıklamaları, görsel bileşen gizlendiğinde, kullanılamadığında veya kullanılamadığında, örneğin kullanıcı uygulamayla etkileşimde bulunduğunda ses sentezine yöneliktir. sürüş sırasında ekran olmadan veya kullanıcının görme engelli olması nedeniyle), bölümler veya meta veriler. Varsayılan alt yazılardır.
srclang özellik, tarayıcıya metin dosyalarının hangi dilde olduğunu söyler ve birden fazla seti bir video veya sesle ilişkilendirmenize olanak tanır - böylece birden çok dilde altyazı sunabilirsiniz. Etiket isteğe bağlıdır ve parça için kullanıcı tarafından okunabilir bir başlıktır.
video kontrolleri> kaynak src = movie.mp4 type = video / mp4> kaynak src = movie.webm type = video / webm> track type = subtitles srclang = tr src = subtitles-en.vtt> track type = subtitles srclang = de src = subtitles-de.vtt label = "Almanca">! - geri dönüş içeriği, örneğin bir Flash filmi veya YouTube yerleştirme kodu / videosu>
Spesifikasyon, tarayıcıların zamanlanmış metnin varlığını nasıl ilettikleri konusunda herhangi bir gereksinim duymamaktadır ve henüz hiçbir gönderim tarayıcısı bunu desteklememektedir, ancak bir Polyfill kullanmayı deneyebiliriz.
Hızlı prototipleme için Julien Villetorte'den hafif bir senaryo olan Playr'i kullanmayı seviyorum. Github'da mevcuttur. Playr kullanıcı arayüzünü oluşturan resimleri alın, ekleyin playr.js ve playr.css sayfanızın başına sınıf adı ekleyin playr_video video etiketinize ekleyin ve sayfanız seksi bir Playr görünümü ve altyazılarınız arasında seçim yapma yeteneği ile işlenecektir.
Kullanıcı arayüzünün Polyfill tarafından yapıldığını ve henüz herhangi bir tarayıcıda yerleşik olmadığını, ancak yakında olacağını unutmayın. Opera, Microsoft ve Google tarafından üzerinde çalışılıyor ve tarayıcıların benzer bir kullanıcı arayüzü ve işlevsellik sunması muhtemeldir.
parça> öğesi de zamanlanmış metin için belirli bir formatı önceden varsaymaz. Bu durumda, bu bir webVTT dosyasıdır, ancak parça>, sevmek img>, video> ve ses> biçimden bağımsızdır. Tüm tarayıcılar yeni WebVTT formatını destekleyecek ve Microsoft, TTML adlı eski bir formatı da destekleyeceğini duyurdu.
WebVTT
WebVTT yepyeni bir zamanlanmış metin formatıdır. Web diğer formatlarla doludur - en az 50 - öyleyse neden yeni bir tane icat etsin? Çünkü basit bir formata ihtiyacımız var.
WebVTT'nin yazılması çok kolaydır. Bu hayati bir nokta: Çok zorsa, yazarlar zahmet etmeyecek ve yeni öğeler ve API'ler için hiçbir tarayıcı desteği, orada altyazılı video yoksa multimedya içeriğini erişilebilir hale getirmeyecek. En basit haliyle WebVTT şuna benzer:
WEBVTT
00:01.000 --> 00:02.000
Merhaba
00:03.000 --> 00:05.000
Dünya
En üstte WEBVTT bulunan UTF-8 kodlu bir metin dosyasıdır. Zamanlamalar, medyanın başlangıcından itibaren sapmalar olarak belirtilir. Bu nedenle, videonun başlangıcından iki saniyeye kadar videoda bir saniyeden itibaren "Merhaba" görüntülenecektir (bu nedenle, bir saniye süreyle görüntülenecektir). Altyazılar başlangıçtan üç saniye sonrasına kadar kaybolacak ve bu noktada “World” görüntülenecektir.
Çok daha kolay hale gelmiyor. Elbette, istersen daha fazlasını da yapabilirsin. Örneğin, altyazının konumunu değiştirebilirsiniz (böylece örneğin çerçevenin beyaz bir kısmında beyaz metin görmezsiniz).
00: 03.000 -> 00: 05.000 L: -% 85
Bu, altyazıyı, videonun altındaki varsayılan konumundan medya yüksekliğinin yüzde 85'i kadar "yukarı" hareket ettirir.
Örneğin metin boyutunu değiştirebilirsiniz S:% 150 boyutu varsayılanın yüzde 150'sine yükseltir. Alt yazıların aşamalı olarak görünmesi mümkündür (örneğin, satırın her seferinde bir sözcük olarak göründüğü, ancak yeni bir sözcük görüntülendiğinde önceki sözcüğün kaybolmadığı karaoke şarkı sözlerinde). Farklı konuşmacıların kelimelerini farklı renklerle biçimlendirebilirsiniz ve farklı renklerle farklı kelimelerin stilini belirlemek için temel destek vardır. Daha fazla bilgi için delphiki.com/webvtt/#cue-settings adresini ziyaret edin.
Bu biçimsel seçeneklerden daha önemlisi, mevcut olan uluslararasılaştırma seçenekleridir. WebVTT spesifikasyonu, Arapça ve İbranice gibi diller için sağdan sola destek, Çince gibi diller için dikey destek ve Çince, Japonca ve Korece için telaffuz ipuçları olarak Ruby ek açıklamaları ekleme becerisi içerir.
WebVTT'yi denemek istiyorsanız, Playr'i alın ve yazmaya başlayın. Opera’dan Anne van Kesteren, çalışmanızı test etmek için canlı bir webVTT doğrulayıcısı yazdı.
Tam ekran video
Herkes tam ekran videoyu sever. HTML5 belirleyicileri dışında, yani buna uzun süre izin vermeyen herkes. WebKit, WebkitEnterFullscreen ()ve API'yi, yalnızca kullanıcı eylemi başlattığında tetiklenebilecek bir şekilde uyguladı; pop-up pencereler gibi, kullanıcı tıklama gibi bir eylem gerçekleştirmediği sürece oluşturulamaz.
Mayıs 2011'de WebKit, Mozilla'nın kendi tarzını tam ekran bir API uygulayacağını duyurdu. Bu API, herhangi bir öğenin tam ekrana geçmesine izin verir (yalnızca video>) - isteyebilirsin
Tam ekran tuval> bir sayfaya gömülü oyunlar veya video widget'ları iframe>. Komut dosyaları, tam ekran görünümü sırasında alfanümerik klavye girişinin etkinleştirilmesini de seçebilir; bu, süper güzel platform oyununuzu oluşturabileceğiniz anlamına gelir. tuval> API ve tam klavye desteği ile tam ekran çalışabilir.
Opera da bu yaklaşımı sevdiği için birlikte çalışabilirliğe yaklaşan bir şey görmeliyiz. O zamana kadar, videonun boyutlarını pencere boyutuna eşitleyerek tam pencereye geçerek tam ekran taklidi yapmaya devam edebiliriz.
Medya öğelerini senkronize etme
Medya öğelerini senkronize etme yeteneği hala belirtilmektedir, bu nedenle uygulamadan senkronize altyazılara ve altyazılara göre daha uzaktır. Birkaç ilgili medya öğesinin (video, ses veya her ikisinin bir karışımı) bağlanmasına izin verecektir.
Bunun için iki ana kullanım durumu vardır. Spor etkinliklerinin videolarını gösteren bir site hayal edin: Her biri farklı bir kamera açısından birden çok video öğesi olabilir - örneğin, her kalede biri havada, biri havada ve diğeri topu izliyor. Bir konseri gösteren bir sitede bir kamera bas gitarda, biri gitarda, diğeri Perulu burnu üzerinde olabilir. Bir videodaki arama çubuğunu hareket ettirmek veya oynatma oranını ağır çekim olarak değiştirmek, diğer videoların her birini etkilemelidir.
Bir diğer önemli kullanım durumu da erişilebilirliktir. parça> öğesi, metni bir videoya senkronize etmemize olanak tanır; medya öğelerini senkronize etme yeteneği, başka bir videoyu (örneğin, ana videoda söylenen kelimeleri imzalayan bir kişinin filmini) senkronize etmemize veya diyalog araları sırasında bir videodaki eylemi açıklayan bir ses parçasını senkronize etmemize olanak tanır.
Tam bir Denetleyici API'si belirtilmiştir, ancak ortam öğelerini senkronize etmenin en kolay yolu, mediagroup özniteliğini kullanarak bildirimsel olarak olacaktır. video> veya ses>. Ortam grubu için aynı değere sahip olanların tümü senkronize edilecektir:
video mediagroup = "jedward" src = "bass-guitar.webm"> ../ video> video mediagroup = "jedward" src = "lead-guitar.webm"> ../ video> video mediagroup = "jedward" src = "idiot-1.webm"> ../ video> video mediagroup = "jedward" src = "idiot-2.webm"> ../ video>
Bu işaretleme yığını, bir Jedward konserinde farklı müzisyenlerdeki dört kamerayı senkronize eder. Aşağıdakiler, sesli açıklamayı popüler Mankini Magic filmiyle senkronize eder:
video mediagroup = "description-film" src = "mankini-magic.webm"> ../ video> audio mediagroup = "tarif edilen-film" src = "define.ogg"> ../ audio>
Bu hala belirtiliyor, bu nedenle tarayıcı desteği yok ve (bildiğim kadarıyla) polyfill yok.
Kamera ve mikrofona erişim
HTML5'in şimdiye kadar gasp edemediği birkaç eklenti kullanımı vardır. DRM ile içeriği kopyalamaya karşı korumak bunlardan biridir (bununla ilgili daha fazla bilgi için yukarıdaki ve arka sayfadaki Soru ve Cevaplara bakın). Bir diğeri ise uyarlanabilir akış - üzerinde çalışılıyor olsa da, bit hızını vb. Ağ koşullarına göre değiştirmek.
Geleneksel olarak Flash eklentisinin bölgesi olan HTML5, artık bir cihazın kamerasına ve mikrofonuna bağlanma olanağını ekliyor. Önceden HTML5 olarak biliniyordu cihaz>, bu işlevsellik artık getUserMedia. Cihaza ne tür bir medya almak istediğimizi söylemek için, ses veya videoyu argüman olarak iletiriz. Birçok cihazda, kullanıcının görüntüsünü yakalayan öne bakan bir kamera ve arka kamera bulunduğundan, jetonun kullanıcısına veya ortamına geçebiliriz.
İlk olarak, tespit özelliğine sahibiz:
if (navigator.getUserMedia) {navigator.getUserMedia (’ses, video kullanıcısı’, successCallback, ¬ errorCallback);
Akıntılara sahip olduğumuzda, ihtiyaç duyduğumuz şekilde kullanabiliriz. Burada, akışı bir video öğesinin kaynağına bağlayarak sayfadaki akışı kopyalayacağız:
var video = document.getElementsByTagName (‘video’) [0] ... function successCallback (stream) {video.src = stream; }
Bunu aldıktan sonra, videonun geçerli karesini almak için drawImage'ı kullanarak videoyu bir tuval öğesine kopyalamak ve her 67 milisaniyede bir yeniden çizmek (yani saniyede yaklaşık 15 kare) basittir. Tuvale girdikten sonra piksellere şu yolla erişebilirsiniz: getImageData.
Opera'dan Richard Tibbett'in bir örneğinde, tuvale daha sonra gerçek zamanlı olarak yüz tanıma gerçekleştirmek için JavaScript ile erişilir! - ve bir yüz bulunduğunda, doğru yere sihirli bir HTML5 bıyığı çizmek için.
getUserMedia Opera 12, Opera Mobile 12 ve Canary sürümlerinde desteklenir
Chrome. GetUserMedia'nın daha birçok örneğini burada bulabilirsiniz.
Açıkçası, web sitelerine web kameranıza erişim izni vermek, önemli gizlilik sorunları yaratabilir, bu nedenle kullanıcılar, coğrafi konumla ilgili yapmak zorunda oldukları gibi, kaydolmak zorunda kalacaklar. Ancak bu, teknik bir sorundan ziyade bir kullanıcı arayüzü sorunudur.
Elbette, tasarımcının getUserMedia API'nin bıyık çizmenin yanı sıra başka kullanımları da vardı. Tarayıcı tabanlı QR / barkod okuyucular için kullanılabilir. Veya daha heyecan verici bir şekilde artırılmış gerçeklik. HTML5 Çalışma Grubu şu anda kameranızı ve mikrofonunuzu video> ve ses> başka birinin tarayıcısının öğeleri, video konferans yapmayı mümkün kılar.
WebRTC
Mayıs 2011'de Google, HTML5 spesifikasyonlarına dayalı, web'de ses ve video için açık bir teknoloji olan WebRTC'yi duyurdu. RTC, "gerçek zamanlı iletişim" anlamına gelir ve tarayıcıda video konferans anlamına gelir. Kameranızı ve mikrofonunuzu HTML5 PeerConnection API üzerinden arkadaşınızın tarayıcısındaki (ve tersi) bir web sayfasındaki bir video> öğesine bağlar.
WebRTC, VP8'i (WebM'deki video codec'i) ve gürültü ve yankı giderme ile konuşma için optimize edilmiş iki ses codec'i kullanır; iLBC, dar bant ses codec'i ve bant genişliğine uyarlanabilir geniş bant codec'i olan iSAC. Proje web sitesinin dediği gibi, "WebRTC desteğini yakında Firefox, Opera ve Chrome'da görmeyi umuyoruz!"
Gördüğünüz gibi, HTML5 multimedya desteği çok daha zengin olmak üzere. HTML5'te her zaman olduğu gibi, uygulamaların spesifikasyona yetişmesi gerekir - ve spesifikasyonların da bitmesi gerekir - ancak gelecek gerçekten de heyecan verici görünüyor.
Videonun geleceği hakkında daha fazla bilgi için John Foliot ve Silvia Pfeiffer ile Soru ve Cevap bölümümüze bakın
