Na Conferência de Desenvolvedores de HTML5, que aconteceu em abril deste ano, eu assisti à sessão de Philippe Le Hegaret em “Vídeo na Plataforma Web Aberta”. Como a quantidade de vídeo na Web está crescendo, eu sempre quis saber se o comportamento de pré-carregamento da tag VIDEO poderia ser responsável por isso. Talvez o seu comportamento padrão seja pré-carregar agressivamente.

O atributo VIDEO PRELOAD tem os seguintes estados possíveis:

nenhum atributo preload
Preload não é especificado.

preload=’none’

A partir do spec, “Dicas para o navegador que o usuário não devera precisar do vídeo, ou que minimiza o trafego desnecessário é desejável”.

preload=’metadata’

“Dicas para o navegador que não é esperado que o usuário precise do vídeo, mas que busque seus metadados (dimensões, primeiro quadro, lista de faixas, duração e assim por diante) é desejável”.

preload=’auto’

“Dicas para o navegador que otimiza o download do vídeo inteiro é considerado desejável”.

preload or preload=”

” O atributo preload é especificado, mas nenhum valor é dado. Especificar a string vazia é o mesmo que especificar “auto”.

Eu criei uma página de teste de vídeo em HTML5 baseada na página de teste de Philippe. A página de teste inclui uma tag VIDEO. Clicar sobre os vários links de teste altera o estado do atributo PRELOAD. O JavaScript mede quanto do vídeo é bufferizado. O vídeo inteiro tem 52,2 segundos. O resultado final é o número de segundos bufferizados (pré-carregados).

A fim de reunir os resultados em vários navegadores, conectei a página de teste para um teste de usuário Browserscope e tuitei pedindo as pessoas para executarem a página de teste. (Havia algumas falhas na página de teste que resolvi depois de um tempo real incrível, sessão de anti-bug levado pelo twitter com testadores voluntários. Foi muito legal.) Um subconjunto dos principais navegadores é mostrado na Tabela 1. Você pode ver os resultados completos em Browserscope.

Table 1. Seconds of Video Preloaded
browser	no preload attr	preload ='none'	preload= 'metadata'	preload ='auto'	preload =''	autoplay
Android 4	0 s	0 s	0 s	0 s	0 s	0 s
Chrome 26	25 s	0 s	25 s	25 s	25 s	52 s
Firefox 19	0 s	0 s	0 s	53 s	53 s	53 s
IE 9	2 s	0 s	2 s	52 s	52 s	52 s
IE 10	0 s	0 s	0 s	52 s	52 s	52 s
iPhone iOS6	0 s	0 s	0 s	0 s	0 s	0 s
Opera 12	10 s	0 s	10 s	53 s	53 s	53 s
Safari 6	52 s	0 s	0 s	52 s	52 s	52 s

Observação 1: Os dispositivos moveis não fazem pré-carregamento de nada. As especificações da tag VIDEO chamam os valores pré-carregados de “dicas”, por isso faz sentido que os navegadores móveis escolham não preload qualquer coisa, a fim de economizar custos de dados. Em vez disso, o vídeo não começa a baixar até que o usuário inicie a reprodução. Quando eu vi isso, decidi adicionar um teste para o atributo AUTOPLAY. Como mostrado, isso também não gera qualquer download de vídeo em dispositivo móveis.

Observação 2: A quantidade de vídeo pré-carregado varia entre os principais navegadores desktop. Felizmente, preload=’none’ tem um comportamento consistente em todos os navegadores: não é feito buffer. Mas todos os outros valores de PRELOAD variam na quantidade de dados de vídeo que é baixada. O Chrome é agressivo em relação a pré-carregamento, indo tão longe como buffer 25 segundos de vídeo no preload=’metadata’. No entanto, ele é menos agressivo para preload = ‘auto’, parando em 25 segundos, enquanto os outros browsers baixam todos os 52 segundos. O Firefox 19 e o IE 10 geralmente são menos agressivos, fazendo buffer zero segundos para três dos cinco estados preload.

Observação 3: Browsers pré-carregam demais por padrão. Os desenvolvedores provavelmente não vão especificar qualquer valor para PRELOAD. Conforme demonstrado na Tabela 1, essa situação resulta no IE fazendo buffer em 2 segundos de vídeo, Opera 12 em 10 segundos, Chrome 26 em 25 segundos, e Safari 6 buffers durante todo o tempo (52 segundos). O vídeo inteiro tem 4.2MB, então a quantidade de dados transferida é de 0.2MB para IE9, 0.8 para Opera 12, 2.0MB para Chrome 26, e todos os 4.2MB para Safari 6.

Olhando para as top 1000 URLs em todo o mundo, apenas um punhado usa a tag VIDEO. A maioria dos sites ainda está usando Flash Player, que tem o seu próprio comportamento de pré-carregamento. Mas conforme o uso da tag VIDEO aumenta, seria bom determinar quanto de vídeo deve ser bufferizado para vários valores de pré-carregamento, especialmente para o caso padrão de nenhum atributo PRELOAD. Sugiro ser dada uma orientação para conduzir a um número menor, possivelmente de 5 a 10 segundos. Se um desenvolvedor quer ter o pré-carregamento de um vídeo, especificar PRELOAD está apenas a um atributo de distância.

***

Artigo traduzido pela Redação iMasters, com autorização do autor. Publicado originalmente em  http://www.stevesouders.com/blog/2013/04/12/html5-video-preload/