Comment faire de l'HTML 5 vidéo avec Flash-gratuit secours pour IE 8

J'ai besoin d'un simple et propre, sans Flash, cross-browser solution pour l'intégration de la vidéo dans une page Web. Je suis venu avec la solution ci-dessous, et veulent entendre si quelqu'un peut l'améliorer encore plus, y compris:

  1. Pouvez le <object> méthode d'afficher une image fixe alors que la vidéo en mémoire tampon?
  2. Quelqu'un peut vérifier ces commentaires conditionnels? downlevel-hidden et downlevel-revealed m'a un peu confus 🙂

La conversion de la vidéo comme suit (en utilisant WMV pour IE 8, WEBM pour Firefox, et H264 pour le reste):

ffmpeg -i video.mov -b 3000k -vcodec wmv2   -acodec wmav2     -ab 320k -g 30 out.wmv
ffmpeg -i video.mov -b 3000k -vcodec libvpx -acodec libvorbis -ab 320k -g 30 out.webm

De balisage (à l'aide des commentaires conditionnels pour créer une solution de repli pour IE 8 utilisateurs):

<![if (!IE) | (gte IE 9)]>
<video controls="true" autoplay="true" poster="video.jpg">
  <source src="video.mov" type="video/quicktime"/>
  <source src="video.webm" type="video/webm"/>
</video>
<![endif]>

<!--[if (IE) & (lt IE 9)]>
<object classid="clsid:22d6f312-b0f6-11d0-94ab-0080c74c7e95" width="1280" height="720">
  <param name="filename" value="video.wmv"/>
  <param name="autostart" value="autostart"/>
  <param name="showcontrols" value="true"/>
  <param name="showstatusbar" value="true"/>
</object>
<![endif]-->

OriginalL'auteur forthrin | 2013-01-22

  1. 4

    Je suggère de mettre la <object> balise à l'intérieur de la <video> étiquette, d'après les sources. Les navigateurs plus anciens (e.g IE < 9, Firefox < 3.6) qui ne supportent pas la balise vidéo va l'ignorer et d'affichage de ce qui est à l'intérieur, et de nouveaux navigateurs qui ne supportent vidéo ignorer le contenu intérieur (sauf les sources, bien sûr).

    Vous pouvez faire encore mieux en mettant un contenu alternatif à l'intérieur de la <object> balise pour les vieux navigateurs sur les systèmes qui n'ont pas installé Quicktime. En général, ce serait une affiche et une suggestion de mise à niveau du navigateur ou un lien pour télécharger le fichier vidéo.

    Ont un coup d'oeil à Vidéo pour tout le monde pour une description plus complète de la façon dont cela fonctionne, et des exemples. Il suffit de remplacer le Flash de l'objet avec votre objet Quicktime. (Je suppose que, si l'on voulait être vraiment approfondie, vous pouvez mettre un objet Flash à l'intérieur de l'objet Quicktime si vieux navigateurs sur des machines qui n'ont pas installé Quicktime peut avoir recours à Flash, si elles en ont. Mais c'est sans doute un très petit nombre de personnes et est probablement exagéré.)

    OriginalL'auteur brianchirls