Je fais des recherches sur ce sujet depuis un bon moment et j'essaie de faire la même chose, alors j'espère que cela aidera quelqu'un d'autre. J'utilise crossbrowsertesting.com et je le teste littéralement dans presque tous les navigateurs connus de l'homme. La solution dont je dispose actuellement fonctionne sous Opera, Chrome, Firefox 3.5+, IE8 +, iPhone 3GS, iPhone 4, iPhone 4s, iPhone 5, iPhone 5s, iPad 1+, Android 2.3+, Windows Phone 8.
Sources à changement dynamique
La modification dynamique de la vidéo est très difficile, et si vous voulez une solution de secours Flash, vous devrez supprimer la vidéo du DOM / page et la rajouter pour que Flash se mette à jour car Flash ne reconnaîtra pas les mises à jour dynamiques des variables Flash. Si vous allez utiliser JavaScript pour le modifier dynamiquement, je supprimerais complètement tous les <source>
éléments et je l'utiliserais simplement canPlayType
pour définir le src
dans JavaScript et / break
ou return
après le premier type de vidéo pris en charge et n'oubliez pas de mettre à jour dynamiquement le flash var mp4. De plus, certains navigateurs n'enregistrent pas que vous avez changé la source à moins que vous n'appeliez video.load()
. Je pense que le problème que .load()
vous rencontrez peut être résolu en appelant d'abordvideo.pause()
. La suppression et l'ajout d'éléments vidéo peuvent ralentir le navigateur car il continue de mettre en mémoire tampon la vidéo supprimée, mais il existe une solution de contournement .
Prise en charge de plusieurs navigateurs
En ce qui concerne la partie réelle de plusieurs navigateurs, je suis également arrivé à Video For Everybody . J'ai déjà essayé le plugin MediaelementJS Wordpress, qui s'est avéré causer beaucoup plus de problèmes qu'il n'en a résolu. Je soupçonne que les problèmes étaient dus au plug-in Wordpress et non à la bibliothèque. J'essaie de trouver quelque chose qui fonctionne sans JavaScript, si possible. Jusqu'à présent, ce que j'ai trouvé est ce HTML simple:
<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>
Remarques importantes :
- Fini par mettre l'ogg comme le premier
<source>
parce que Mac OS Firefox arrête d'essayer de lire la vidéo s'il rencontre un MP4 comme premier <source>
.
- Les types MIME corrects sont importants .ogv fichiers doivent être
video/ogg
, non video/ogv
- Si vous avez une vidéo HD, le meilleur transcodeur que j'ai trouvé pour les fichiers OGG de qualité HD est Firefogg
- Le
.iphone.mp4
fichier est destiné à l'iPhone 4+, qui ne lira que les vidéos MPEG-4 avec vidéo H.264 Baseline 3 et audio AAC. Le meilleur transcodeur que j'ai trouvé pour ce format est Handbrake, l'utilisation du préréglage iPhone et iPod Touch fonctionnera sur iPhone 4+, mais pour que l'iPhone 3GS fonctionne, vous devez utiliser le préréglage iPod qui a une résolution beaucoup plus basse que j'ai ajoutée video.iphone3g.mp4
.
- À l'avenir, nous pourrons utiliser un
media
attribut sur les <source>
éléments pour cibler les appareils mobiles avec des requêtes multimédias, mais pour le moment, les anciens appareils Apple et Android ne le prennent pas suffisamment en charge.
Modifier :
- J'utilise toujours Video For Everybody mais je suis maintenant passé à l'utilisation de FlowPlayer, pour contrôler la solution de secours Flash, qui dispose d'une API JavaScript géniale qui peut être utilisée pour le contrôler.