Eu tenho pesquisado isso por um bom tempo e estou tentando fazer a mesma coisa, então espero que isso ajude outra pessoa. Eu tenho usado o crossbrowsertesting.com e literalmente testando isso em quase todos os navegadores conhecidos pelo homem. A solução que tenho atualmente funciona no Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8.
Fontes de mudança dinâmica
A alteração dinâmica do vídeo é muito difícil e, se você quiser um substituto do Flash, será necessário remover o vídeo do DOM / página e adicioná-lo novamente para que o Flash seja atualizado, pois o Flash não reconhecerá atualizações dinâmicas nos vars do Flash. Se você usar o JavaScript para alterá-lo dinamicamente, eu removeria completamente todos os <source>
elementos e apenas canPlayType
o src
definiria em JavaScript e / break
ou return
após o primeiro tipo de vídeo suportado, e não esqueça de atualizar dinamicamente o flash var mp4. Além disso, alguns navegadores não registram que você alterou a fonte, a menos que você ligue video.load()
. Acredito que o problema que .load()
você estava enfrentando pode ser corrigido ligando primeirovideo.pause()
. A remoção e a adição de elementos de vídeo podem desacelerar o navegador, porque ele continua armazenando o buffer do vídeo removido, mas há uma solução alternativa .
Suporte entre navegadores
Quanto à parte real do navegador, cheguei ao Video For Everybody também. Eu já experimentei o plugin MediaelementJS Wordpress, que acabou causando muito mais problemas do que resolveu. Eu suspeito que os problemas foram devido ao plug-in Wordpress e não a biblioteca realmente. Estou tentando encontrar algo que funcione sem JavaScript, se possível. Até agora, o que eu vim é esse HTML simples:
<video width="300" height="150" controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" class="responsive">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone.mp4" type="video/mp4" />
<source src="http://alex-watson.net/wp-content/uploads/2014/07/big_buck_bunny.iphone3g.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="561" height="297">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg',{'url':'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4','autoPlay':false}]}" />
<img alt="No Video" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="561" height="297" title="No video playback capabilities, please download the video below" />
</object>
<strong>Download video:</strong> <a href="video.mp4">MP4 format</a> | <a href="video.ogv">Ogg format</a> | <a href="video.webm">WebM format</a>
</video>
Notas importantes :
- Acabou colocando o ogg como o primeiro
<source>
porque o Mac OS Firefox pára de tentar reproduzir o vídeo se encontrar um MP4 como o primeiro <source>
.
- Os tipos MIME corretos são arquivos .ogv importantes
video/ogg
, não devem ser video/ogv
- Se você possui vídeo HD, o melhor transcodificador que encontrei para arquivos OGG de qualidade HD é o Firefogg
- O
.iphone.mp4
arquivo é para o iPhone 4+, que reproduz apenas vídeos MPEG-4 com vídeo H.264 Baseline 3 Video e áudio AAC. O melhor transcodificador que encontrei para esse formato é o Handbrake, usando a predefinição do iPhone e iPod Touch funcionará no iPhone 4+, mas para que o iPhone 3GS funcione, é necessário usar a predefinição do iPod, que possui uma resolução muito mais baixa que eu adicionei video.iphone3g.mp4
.
- No futuro, poderemos usar um
media
atributo nos <source>
elementos para segmentar dispositivos móveis com consultas de mídia, mas agora os dispositivos Apple e Android mais antigos não o suportam o suficiente.
Editar :
- Ainda estou usando o Video For Everybody, mas agora mudei para o FlowPlayer, para controlar o fallback do Flash, que possui uma incrível API JavaScript que pode ser usada para controlá-lo.