Intégrer la vidéo dans la page Web (HTML)

Je viens de rencontrer Cortado . C'est un applet Java qui joue un OGG. Je dois remercier David Dorward EM> pour cela, car la vérification du statut de HTML5 m'a fait venir sur elle. Firefox suggère d'utiliser quelque chose comme:

 <video src="my_ogg_video.ogg" controls width="320" height="240">  
   <object type="application/x-java-applet"  
           width="320" height="240">  
      <param name="archive" value="cortado.jar">  
      <param name="code" value="com.fluendo.player.Cortado.class">  
      <param name="url" value="my_ogg_video.ogg">  
      <p>You need to install Java to play this file.</p>  
   </object>  
 </video>  

Je sais que c'est un peu en retard, mais avez-vous consulté VLC?

Il peut être incorporé dans un site Web, exécuté sous Windows, Mac OS & Linux, est gratuit, open source, prend en charge beaucoup de format vidéo / audio ...

L'inconvénient est qu'il n'a pas de bel interface graphique avec Play / Pause / Set Volume / ... Fonctions, vous devez les créer vous-même.

Vous pouvez jeter un coup d'œil à cet article: http: //www.videolan.org/doc/play-howto/en/ch04.html#id310965

Il existe quelques façons de combiner la vidéo HTML5 avec des retombées pour des navigateurs non prises en charge. Quelques solutions spécifiques ont été démontrées.

Un exemple est vidéo pour tout le monde par Camen Design, qui est conforme à HTML5 et utilise des commentaires conditionnels pour IE et une étiquette d'objet imbriquée pour les navigateurs plus anciens. Cela devrait être une preuve compatible avec des normes, compatible à l'envers et future.

J'ai travaillé sur ce problème car je suis très intéressé par XHTML + RDFA et j'ai trouvé un moyen de lire une vidéo dans un document strict XHTML 1.0 sur les navigateurs HTML5 sans bloquer les navigateurs NO HTML5.

J'ai publié un plugin JQuery. Ici: https://github.com/charlycoste/xhtml-video P>

Et une démo ici: http://demo.ccoste.fr/video p>

En réalité, cela est tout à fait moins puissant que d'utiliser une balise HTML5, mais au moins ... Ça fonctionne! P>

La solution repose sur JavaScript et sur toile mais peut être gracieusement dégradé en utilisant Code> Tags (c'est ce que fait mon plugin JQuery). P>

Ce que je fais est en fait simple: p>

1. i Créez une nouvelle vidéo élément strong> (pas une étiquette) en mémoire mais je n'ajoutez pas strong> it to the DOM Document: P>

   img.setAttribute('src', canvas.toDataURL());
   

2. i Créez un nouveau Canvas CODE> ELEMENT STRUT> EN MÉMOIRE, mais I N'ajoutez pas strong> au document DOM: P >

   canvas.getContext("2d").drawImage(video, 0, 0, width, height);
   

3. i Créez un nouveau img code> élément strong> et i ajouter fort> au DOM. P>

   // var parent = ... ;
   // var width = ...;
   // var height = ...;
   var img = document.createElement('img');
   
   img.setAttribute('width', width);
   img.setAttribute('height', height);
   
   parent.appendChild(img);
   

4. lorsque la vidéo est en cours de lecture ( video.play () code>), je le fais dessiner chaque image dans la toile (qui n'est pas visible, car elle n'est pas ajoutée à la DOM - qui fait le Dom Séjour valide XHTML 1.0 Document) P>

   var canvas = document.createElement('canvas');
   

5. Enfin, j'utilise le TODAaurl () CODE> Méthode de la toile CODE> Elément pour obtenir une image codée de base64 pour le cadre et le mettre au SRC Code> Attribut de l'élément img code>. p>

   var video = document.createElement('video');