This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
* 2008 – HTML5 First Public Working Draft * * Kwiecień 2010 - Bunt Jobsa * * YouTube wdraża VIDEO w HTML5 w 2011 r. * https://www.youtube.com/html5 * * GWP: Pierwsze przymiarki - wrzesień 2013 * * GWP: Do kwietnia 2014 player Flash'owy * Od maja 2014 player HTML5 * (Flash dla niewspierających przeglądarek oraz LiveStream) * * 28 października 2014 - HTML5 Recommendation * */
/* Powstanie HTML5 i tagu VIDEO * * * Popularyzacja wideo jako kontentu i nośnika reklamy, w związku z tym * zapotrzebowanie na natywne mechanizmy do publikowania tych matieriałów.
* * Uniezależnienie się od wtyczek firm trzecich, takich jak QuickTime, czy Flash. * * Ujednolicenie standardu, ułatwienie pracy deweloperom * (semantyka - VIDEO to VIDEO, a nie OBJECT czy EMBED). * */
/* Porównanie HTML5 vs Flash * * HTML5 Flash * * Wymagana instalacja playera Nie Tak * * Działa na urządzeniach mobilnych Tak Nie (już) * * Wsparcie przez iOS Tak Nie * * Szybkość działania Różnie Różnie * * Dojrzała technologia Nie Tak *
* Różne zachowanie w różnych środowiskach Tak (jeszcze) Nie * * * http://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash * */
/* * * Dlaczego wideo w HTML5? * * Uniwersalność * * Większy zasięg * * Łatwość skórkowania * * Łatwość tworzenia nowych form reklamowych * */
/* * * WYZWANIA * * Różnice w implementacjach na różnych przeglądarkch, OS i ich wersjach. * * -> Obsługiwane formaty i kodeki * * http://pl.wikipedia.org/wiki/HTML5_video * * http://caniuse.com/#feat=webm (WP - tylko nowe materiały) * http://caniuse.com/#feat=mpeg4 (WP) * http://caniuse.com/#feat=ogv * * -> Różnice w zachowaniu API i UI * głównie Mobile iOS i stare wersje Androida * * -> Zmora programistów: Stockowa przeglądarka Androida ! * */
/* * * Strumienie NA ŻYWO - Dlaczego dalej we Flashu? * * * RTMP - Real Time Messaging Protocol * * HLS - HTTP Live Streaming * */
/* * * Na HLS zdecydowanie za wcześnie * * Nakład pracy nieporównywalny do efektów * */
/* * * Fullscreen * */
/* * * Fullscreen API - przeznaczenie * * zdjęcia * * filmy * * gry * */
e.source.postMessage(JSON.stringify(output), "*"); } else { throw new CookieError("Cookie name '" + data.name
+ "' not set or cookie is not allowed."); } };
addEvent(window, 'message', message);
/* * * Wykrywanie łącza * */
/* * * Co dają nam przeglądarki? * * * Connection.bandwidth * * Eksperymentalnie tylko Firefox dla Android. * https://developer.mozilla.org/en-US/docs/Web/API/Connection.bandwidth * * * Flash * * Ale co z urządzeniami mobilnymi? * */
/* * * Podejścia do tematu... * * Testowanie na wielu plikach graficznych o różnych wielkościach * * Testowanie na materiale w HTML5 * * */
/* *
* Testowanie na docelowym playerze, czyli tagu VIDEO: * * -> Przy pierwszym (pełnym) evencie PROGRESS pobieramy czas ładowania * i wielkość pobranej części materiału. * * -> Wysyłamy HEAD po wielkość całego materiału. * Tu wymagane są nagłówki CORS: * * Access-Control-Allow-Origin: nasza.domena.pl * Access-Control-Expose-Headers: Content-Length * * -> Wyliczmy bitrate (narzucamy 10%). * * -> Wybieramy jakość z 2 (lub 4) dostępnych i ewentualnie * podmieniamy materiał. * * -> Zapisujemy ostatnio wybraną jakość do międzydomenowego cookie. * * -> Przy kolejnym odtworzeniu (także w innym serwisie) * pobieramy jakość z cookie: * * -> Jeżeli nie ma wartości, jawnie wykrywamy łączę i ewentualnie * podmieniamy materiał. * * -> Jeżeli jest, wykrywamy ponownie w tle i ewentualnie * podmieniamy materiał. * * -> Liczba oczekiwanych eventów PROGRESS jako parametr, * co pozwala określać dokładność pomiaru. * * -> Możemy też użyć eventu CANPLAYTHROUGH, ale na wolniejszych łączach * trzeba na niego długo czekać. * */
var videoContainer = document.createElement('video'),
onQualitySet = function (quality) { // ustawiam jakość },
bandwidthDetector = new WP.player.BandwidthDetection(videoContainer, onQualitySet),
onVideoEvent = function (event) {
if (event.type === "progress") { bandwidthDetector.onProgress(videoContainer); }
if (event.type === "loadstart") { bandwidthDetector.onLaodStart(videoContainer); } };
/* * * Po co, dlaczego tak? * * * Wykonujemy tylko jedno dodatkowe odpytanie HEAD * i gdy zajdzie potrzeba zmieniamy materiał na innej jakości. * * Jakość połączenia jest zmienna, zależna od aktualnego obciążenia łącza. * * Mamy dobre materiały - wykorzystajmy to, zróbmy lepsze wrażenie! * Tylko ok. 1% użytkowników zmienia jakość samodzielnie. * * Zapamiętujemy jakość (i inne parametry) między domenami, co polepsza UX. *
*/
/* * * Lepszy player -> * * lepsze materiały -> * * więcej odsłon/odtworzeń -> * * więcej reklamodawców -> * * większa szansa na premię :). * */