video
Une source vidéo + javascript = vidéo multiplateforme !
Le but de cette recherche est de pouvoir lire une vidéo en ne chargeant qu’un seul fichier vidéo.
Je prendrais le format vidéo .mp4 car il est compatible avec les iPhones et les iPads.
Evidement, ce n’est pas par hasard, puisque iPhone et iPad ne lisent pas le Flash. Pour que cette vidéo soit visible sur d’autres supports, je mets en place une solution alternative avec javascript pour lire la vidéo avec un player Flash. Ce player est personnalisé, mais je donne la base en .fla cs3. Donc, plus besoin de chercher un player .swf lié à un distributeur.
1/ Tout d’abord mettre en place la base du traitement pour la vidéo en html5.
source src="mj_moscowHB.mp4" type="video/mp4"
//seulement MPEG4 pour Safari/iPad, iPhone.
2/ Ensuite, pour résoudre le chargement d’une seule source pour la vidéo, je crée une alternative si le navigateur ne lit pas le .mp4. Avec la librairie jQuery, je conditionne la lecture. Si le navigateur ne reconnait pas la balise “video” ou si c’est mozilla( formats reconnus par Mozilla-firefox ) ou si c’est pour Opéra ( formats reconnus par Opera ) ../..
$(document).ready(function() { var v = document.createElement("video"); // creation du tag video pour vérifier que le navigateur comprend ce tag
// verification si ce n'est pas un ipad
if(navigator.userAgent.match(/iPad/i) == null){
// Si ne comprend le tag "video",
//ou si c'est le navigateur firefox ou si c'est le navigateur opera , alors direction lecteur Flash.
if ( !v.play || $.browser.mozilla || $.browser.opera) { var params = { allowfullscreen: "true", allowscriptaccess: "always" };
//creation de la variable de la source en reference au .fla var flashvars = { myFlashVar: "mj_moscowHB.mp4" }; swfobject.embedSWF("myVideotestFlashVar.swf", "demo-video-flash", "320", "240", "9.0.0", "expressInstall.swf", flashvars, params); } } });
Testé avec Safari, FF, Opéra et ipad
Les démos et le fichier .fla
- Version avec un player basic.
- Version avec un player FLV flash (préformaté de base).
- téléchargez les .fla pour créer votre design vidéo(en Flash-cs3).
source de l’inspiration henriksjokvist.net/archive/2009/10/serving-the-same-h264-video-file-to-everyone-from-internet-explorer-to-iphone
tip by LVdesign.