Streaming Video With HTML5 Homework 1
Índice Introdução... 3 Video Containers... 3 MPEG4... 3 Ogg... 3 Flash Video... 3 WebM... 3 Video Codecs... 4 H.264... 4 Theora... 4 VP8... 4 Audio Codecs... 5 MP3... 5 AAC... 5 Vorbis... 6 H.264 Considerações Importantes... 6 Browser Compatibility Test... 7 Chrome (30.0.1599.101 m):... 7 Firefox (24.0):... 7 Explorer (9.0.8112.16421):... 8 Opera (17.0.1241.53):... 8 Safari (5.1.7):... 8 Encoding... 9 HTML 5 Streaming... 9 Markup... 9 Video Stream... 9 Browser Test... 10 Chrome... 10 Firefox... 10 Explorer... 10 Opera... 10 Safari... 10 Fontes e Referências... 11
Introdução O HTML5 foi inovador no streaming de vídeo na web pois estandardizou o processo através do tag <video>. No entanto este continua em evolução e não existe neste momento um só formato que seja suportado por todos os browsers e aparelhos. Por esta razão é necessário manter-se a par dos contentores e codecs de vídeo e áudio suportados e se dispõem de um custo de implementação. Video Containers Os contentores são como as pastas zipadas, contêm os codecs de vídeo e áudio. Os mais utilizados na web são o MPEG4, Ogg, Flash Video e WebM. MPEG4 - extensões habituais:.mp4 e.m4v - é baseado no contentor do QuickTime da Apple (.mov) Ogg - extensão habitual:.ogv - é suportado pelo Firefox 3.5, Opera 10.5, Chrome 4 sem plugins adicionais - os formatos de vídeo e áudio são Theora e Vorbis, respetivamente - é suportado pelo Linux Flash Video - extensão habitual:.flv - utilizado pelo Adobe Flash WebM - extensão habitual:.webm - compressão do vídeo para utilização em HTML5 - os formatos de vídeo e áudio são VP8 e Vorbis, respetivamente - é suportado pelo Firefox, Opera, Chrome e Chromium
Video Codecs Um codec é um algoritmo pelo qual se codifica um stream de vídeo. A compressão lossless (sem perdas) é pesada demais para a web, por isso usam-se lossy codecs (com perdas). H.264 - conhecido como MPEG-4 part10 ou MPEG-4 AVC - tem como objetivo disponibilizar um codec adequado para qualquer tipo de largura de banda, por isso tem vários perfis que tornam isso possível - tem uma boa qualidade visual - os ficheiros têm menor tamanho - mas demora mais tempo a codificar - requer mais potência a nível de CPU para descodificar - pode ser inserido em vários formatos incluindo MP4 e MKV - é patenteado pela MPEG LA group Theora - desenvolvido pela On2 e é gratuito - pode ser inserido em qualquer contentor mas o Ogg é o mais utilizado - é suportado pelo Linux - é suportado pelo Firefox (num contentor Ogg) - é suportado por Windows e Mac depois do download de software extra VP8 - a qualidade do VP8 é equivalente à do H.264 no high profile, enquanto a facilidade de descodificação é equivalente ao baseline do H.264 - também desenvolvido pela On2, o VP8 é gratuito
Audio Codecs Novamente, um áudio codec é um algoritmo pelo qual é codificado um stream de áudio. Da mesma forma que no vídeo o audio lossless é pesado de mais para a web, por isso, os codecs lossy são muito utilizados. Codecs diferentes perdem fatores diferentes, mas o seu objetivo é sempre o mesmo, fazer-nos pensar que estamos a ouvir as partes que estão em falta. O ficheiro de som é dividido em diferentes canais (um canal para cada dispositivo de output de som, por exemplo para duas colunas são utilizados dois canais), estes que são codificados no mesmo stream e durante a descodificação são separados novamente nos canais que o constituem. Para a web praticamente só são necessários três codecs de áudio diferentes: MP3, AAC e Vorbis. MP3 - nome completo: MPEG-1 Audio Layer 3 - podem conter até dois canais - podem ser codificados a bitrates diferentes (de 32 a 320) - não há uma definida para se codificar um MP3, mas há só uma maneira de descodificá-las - o melhor codificador gratuito é o LAME Project exceto para bitrates baixos - o Linux não suporta o MP3 sem software adicional - os MP3 podem ser inseridos em qualquer contentor de vídeo - o Adobe Flash suporta o MP3 sozinho e dentro de um contentor MP4 de vídeo AAC - nome completo: Advanced Audio Coding - desenvolvido com o objetivo de ter melhor qualidade que o MP3 tendo os mesmos bitrates (podendo ser codificado a qualquer bitrate) - pode codificar até 48 canais diferentes de audio - tem vários perfis como o H.264 que se complementam
- todos os dipositivos da Apple suportam algum perfil de AAC sozinhos ou dentro de um contentor de vídeo MP4 - o Adobe Flash suporta todos os perfis de AAC dentro de contentores MP4 como também o fazem o MPlayer e o VLC - para codificar AAC o FAAC library é uma opção open source Vorbis - é suportado pelo Linux e o RockBox - o Firefox suporta-o dentro de um contentor Ogg - o Android também suporta ficheiros Vorbis - normalmente pode ser transmitido em streaming num contentor Ogg ou WebM, mas também o pode ser dentro de um contentor MP4 ou MKV - consegue codificar um número arbitrário de canais de áudio - existem vários codificadores open source de ficheiros Vorbis incluindo o Ogg, ffmpeg, aotuv e libvorbis H.264 Considerações Importantes De acordo com os dados obtidos no capítulo V Video on the Web do livro HTML Up and Running de Mark Pilgrim (publicado em Agosto de 2010) o h.264 tinha um elevado custo para qualquer tipo de distribuição. No entanto, também constata que a 31 de Dezembro de 2010 acabaria o período de implementação desse sistema e ocorreria uma reavaliação do custo. No vídeo How-To: Encoding Video for HTML5 de Jan Ozer (Novembro de 2011) ele menciona que os sistemas que distribuem os seus vídeos gratuitamente seriam isentos de custos, mas os browsers que suportam h.264 teriam que pagar uma cota anual com um valor máximo de 5 milhões de euros. Por essa razão Jan afirma que o Firefox e Opera provavelmente não iriam aderir ao h.264. Mesmo assim, verificamos que, hoje em dia, o Firefox suporta ficheiros de h.264 e o Opera é o único browser que não suporta este tipo de ficheiros.
Browser Compatibility Test Tendo em conta os aspetos importantes dos codecs de áudio e vídeo, foi necessário fazer um teste de compatibilidade nos diferentes Browsers para estar a par do que funciona e não funciona na atualidade. Acedendo a http://www.jwplayer.com/html5/formats/, realizei o teste em cinco Browsers diferentes: Chrome (30.0.1599.101 m): No Google Chrome funcionam todos os ficheiros (MP4 vídeo, AAC áudio, WebM vídeo, Vorbis áudio e MP3 áudio) com a exceção do flash vídeo (FLV). Firefox (24.0): No Firefox, como no Chrome, funcionam todos os ficheiros (MP4 vídeo, AAC áudio, WebM vídeo, Vorbis áudio e MP3 áudio) com a exceção do flash vídeo (FLV).
Explorer (9.0.8112.16421): Escola Superior de Educação de Coimbra No Internet Explorer apenas funcionam os ficheiros MP4 vídeo, AAC áudio e MP3 áudio. Sendo que não funcionam os ficheiros WebM vídeo, Vorbis áudio e flash vídeo (FLV). Opera (17.0.1241.53): No Opera apenas funcionam os ficheiros WebM vídeo e Vorbis áudio. Sendo que não funcionam os ficheiros MP4 vídeo, AAC áudio, flash vídeo (FLV) e MP3 áudio. Safari (5.1.7): No Safari, bem como no Explorer, apenas funcionam os ficheiros MP4 vídeo, AAC áudio e MP3 áudio. Sendo que não funcionam os ficheiros WebM vídeo, Vorbis áudio e flash vídeo (FLV).
Encoding De modo a garantir que o vídeo funcionasse em todos os browsers é necessário codifica-los em diferentes formatos (MP4, Ogg e WebM). Para realizar a codificação utilizei o Handbrake e o Firefogg. HTML 5 Streaming No exercício foi proposto codificar um vídeo em três formatos diferentes e coloca-los online de modo a que o browser escolha um formato compatível para reproduzir. No entanto, primeiro realizei um teste por iniciativa própria, por isso estarão disponíveis dois vídeos. Markup Para fazer o Markup, baseei-me na secção A Complete, Live Example do capítulo V Video on the Web do livro HTML Up and Running de Mark Pilgrim: http://diveintohtml5.info/video.html#example, tendo alterado pequenos pormenores como, por exemplo o tamanho do vídeo para 400x300px. Video Stream Foi feito o upload do ficheiro HTML (ligado ao mesmo ficheiro css que o index do site) juntamente com um um ficheiro htaccess para permitir o reconhecimento dos MIME types pelos browsers. Estes encontram-se alojados em http://aulasdev.esec.pt/~lgois, mais especificamente em http://aulasdev.esec.pt/~lgois/videos.html.
Browser Test Chrome Firefox Explorer Opera Safari
Fontes e Referências http://diveintohtml5.info/video.html http://www.w3schools.com/html/html5_video.asp http://www.youtube.com/watch?v=pxdlkuvdvuu http://vimeo.com/5377029 http://www.longtailvideo.com/html5/formats/ http://www.longtailvideo.com/html5/