He estado investigando esto por bastante tiempo y estoy tratando de hacer lo mismo, así que espero que esto ayude a alguien más. He estado usando crossbrowsertesting.com y lo estoy probando literalmente en casi todos los navegadores conocidos por el hombre. La solución que tengo actualmente funciona en Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8.
Fuentes cambia dinámicamente
que cambia dinámicamente el video es muy difícil, y con un flash repliegue tendrá que eliminar el vídeo de la DOM/página y volver a añadir para que flash actualizar ya que flash no reconocerá dinámico actualizaciones a Flash vars. Si va a usar JavaScript para cambiarlo dinámicamente, eliminaría completamente todos los elementos <source> y simplemente use canPlayType para configurar el src en JavaScript y break o return después del primer tipo de video compatible y no olvide actualizar dinámicamente el flash var mp4. Además, algunos navegadores no registrarán que usted cambió la fuente a menos que llame al video.load(). Creo que el problema con .load() que estaba experimentando se puede solucionar llamando primero al video.pause(). Eliminar y agregar elementos de video puede ralentizar el navegador porque continúa almacenando en búfer el video eliminado, pero there's a workaround.
Cross-browser apoyo
En cuanto a la parte real entre navegadores, llegué a Video For Everybody también. Ya probé el plugin MediaelementJS Wordpress, que resultó causar muchos más problemas de los que resolvió. Sospecho que los problemas se debieron al complemento de Wordpress y no a la biblioteca en realidad. Estoy intentando encontrar algo que funcione sin JavaScript, si es posible. Hasta ahora, lo que he llegado con esta es la versión HTML:
<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:
- acabó poniendo el ogg como el primer
<source> porque Mac OS Firefox deja de tratar de jugar el video si encuentra un MP4 como el primer <source>.
- Los tipos MIME correctos son importantes .ogv archivos deben ser
video/ogg, novideo/ogv
- Si tiene vídeo de alta definición, la mejor transcodificador que he encontrado para OGG calidad HD es Firefogg
.iphone.mp4 El archivo es para el iPhone 4+ que será única reproducir videos MPEG-4 con video H.264 Baseline 3 y audio AAC. El mejor transcodificador que encontré para ese formato es Handbrake, usando el iPhone & El iPod Touch preajustado funcionará en el iPhone 4+, pero para que el iPhone 3GS funcione debe usar el iPod preajuste que tiene una resolución mucho menor que yo agregado como video.iphone3g.mp4.- En el futuro podremos usar un atributo
media en los elementos <source> para orientar los dispositivos móviles con consultas de medios, pero ahora los dispositivos Apple y Android anteriores no lo admiten lo suficientemente bien.
¿Hay algún formato de video que sea estándar en el futuro para html5? –
Si Apple admitiera el formato WebM, podría suceder en un futuro próximo, ya que creo que IE9 ahora admite WebM, pero es muy dudoso que lo hagan, ya que están estrechamente vinculados con el formato propietario H264. –