VIDEO HTML5

[redtango2]

J'ouvre ce Topic
pour trouver une solution video :
en html 5 on peut aficher sur les principaux navigateurs normaux (même IE) des videos interactives.

http://sublimevideo.net/demo

Ce qui après les superbes Animation 3D v2.3, complèterait l'offre d'un module
"dynamique" dans le sens commercial.

Questions de base :
Comment intégrer ces balises HTML5? voir plus loin et le lien
ou
Comment s'inspirer d'animation 3D pour inscrire une animation flash HTML5 dans le style animation 3d ?


Un nouveau chantier, qui j'espère intéressera certains.
Liens : http://sublimevideo.net/demo


Codes : http://www.seomix.fr/web/developpement/videolink-javascript-video-html5/#la-balise-video

balise vidéo

Le code :

<video src=mavideo.ogv
width=500
height=400
controls
poster=mavideo.jpg>
Texte de remplacement
</video>

Bien entendu, il faut avoir un navigateur compatible (Firefox, Chrome, Safari, ...), sinon le texte de remplacement sera affiché. Vous pouvez donc placer à la place du texte de remplacement vos balises objects qui sont utilisées pour l'HTML4.

Faute d'accords entre les navigateurs, le html 5 n'a pas d'encodage défini. Les vidéos doivent être encodées en Ogg Theora (pour la plupart des navigateurs), H.264 (pour Safari notamment), MP4 ou WebM, ce qui obligera à utiliser plusieurs encodages différents pour que les vidéos soient lisibles sur tous les navigateurs :

<video width=500 height=400 controls poster=mavideo.jpg>



Texte de remplacement
</video>


lien : script IE9

<!--[if lte IE 9]>
[removed][removed]

[redtango2]

le code IE9
lien : script IE9
http://html5shiv.googlecode.com/svn/trunk/html5.js

en dur :
// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.5.1 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(p,e){var q=e.createElement("div");q[removed]="i";q.childNodes.length!==1&&function;(){function r(a,{if(g[a])g[a].styleSheet.cssText+=b;else{var c=s[l],d=e[j]("style");d.media=a;c.insertBefore(d,c[l]);g[a]=d;r(a,[spam-filter]function t(a,{for(var c=new RegExp("\\b("+m+")\\b(?!.*[;}])","gi"),d=function(k){return".iepp_"+k},h=-1;++h;r(b,a[h].cssText.replace(c,d))[spam-filter]for(var s=e.documentElement,i=e.createDocumentFragment(),g={},m="abbr article aside audio canvas details figcaption figure footer header hgroup mark meter nav output progress section summary time video".replace(/ /g, '|'),
n=m.split("|"),f=[],o=-1,l="firstChild",j="createElement";++o\\s*$","i");i[removed]=a.outerHTML.replace(/\r|\n/g," ").replace(c,a.currentStyle.display=="block"?"

":"");c=i.childNodes[0];c.className+=" iepp_"+
d;c=f[f.length]=[a,c];a[removed].replaceChild(c[1],c[0])}t(e.styleSheets,"all")});p.attachEvent("onafterprint",function(){for(var a=-1,b;++a