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

Question

Je souhaite intégrer une vidéo à une page Web.
Je ne souhaite pas utiliser Flash, car il n'est pas disponible pour un grand nombre de plates-formes.
Je suis réticent à utiliser HTML5 parce que ce n'est pas encore trop standard (c'est standard, mais la plupart des gens n'ont pas de navigateur qui le supporte)

Y a-t-il un autre moyen? Ou devrais-je m'en tenir à HTML5 et à une énorme bannière invitant les gens à mettre à jour leur navigateur?

Answer 1

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

Un exemple est Vidéo pour tous de Camen Design, qui est conforme à HTML5 et utilise des commentaires conditionnels pour IE et une balise d'objet imbriquée pour les anciens navigateurs. Cela doit être conforme aux normes, rétrocompatible et évolutif.

Answer 2

HTML 5 n'est pas standard. C'est un brouillon. Cela deviendra probablement la norme un jour. Cela changera probablement en premier.

Si vous souhaitez incorporer une vidéo dans une page, Flash est au moins la meilleure des options prises en charge. Je proposerais un lien vers une version téléchargeable normale en option pour les personnes qui ne disposent pas de Flash (ou qui souhaitent simplement regarder la vidéo dans un lecteur vidéo dédié).

Dire aux gens de mettre à jour leur navigateur ne va pas beaucoup aider. Pour autant que je sache, Firefox est le seul navigateur prenant en charge la vidéo dans une version stable. Chrome ne le prend pas en charge, sauf dans la version de développement. Je ne pense pas qu'Opera ait sorti une version stable avec support. Microsoft ne l'a certainement pas encore ajouté à Internet Explorer. Safari pour lequel je ne suis pas sûr.

Si vous voulez vraiment éviter Flash, vous pouvez utiliser un objet HTML 4.01.

<object data="myVideo.ogv" type="video/ogg">
  <!-- fallback content here -->
</object>

& # 8230; et espérons que l'utilisateur dispose d'un plug-in capable de gérer la vidéo installée.

Answer 3

Je viens de rencontrer Cortado . C'est un applet Java qui joue un OGG. Je dois en remercier David Dorward , car le fait de vérifier le statut de HTML5 m'a permis de le découvrir. 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>  

Java est disponible sur beaucoup plus de plates-formes que Flash, et, dans ce cas, si le repli sur HTML5 est nécessaire.

( source )

Answer 4

Je sais qu'il est un peu tard, mais avez-vous jeté un coup d'œil à VLC?

Il peut être intégré à un site Web, fonctionne sous Windows, Mac OS & amp; Linux, est gratuit, open source, supporte beaucoup de formats vidéo / audio ...

L’inconvénient est qu’elle ne dispose pas d’une interface graphique agréable avec des fonctions de lecture / pause / réglage du volume / ..., vous devez les créer vous-même.

Vous pouvez consulter cet article: http: //www.videolan.org/doc/play-howto/en/ch04.html#id310965

Answer 5

Pourquoi pensez-vous que beaucoup de grands sites Web utilisent Flash pour lire des vidéos? Probablement pas à cause de son indisponibilité ... Bien sûr, il existe des alternatives à l'intégration de contenu vidéo dans une page Web, mais si la disponibilité pose problème, Flash est la meilleure solution pour le moment.

Answer 6

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 HTML5.

J'ai publié un plugin jQuery ici: https://github.com/charlycoste/xhtml-video

Et une démonstration ici: http://demo.ccoste.fr/video

En fait, c’est beaucoup moins puissant que d’utiliser une balise HTML5, mais au moins ... ça marche!

La solution repose sur javascript et canvas, mais peut être dégradée avec élégance à l'aide de <object> balises (c'est ce que fait mon plugin jQuery).

Ce que je fais est en réalité simple:

1. Je crée un nouvel élément vidéo (pas une balise) en mémoire, mais je ne l'ajoute pas au document DOM:

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

2. Je crée un nouvel canvas élément en mémoire, mais je ne l'ajoute pas au document DOM:

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

3. Je crée un nouvel img élément et je l'ajoute au DOM.

   // 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()), je lui fais dessiner chaque image du canevas (ce qui n’est pas visible, car elle n’a pas été ajoutée au DOM - ce qui permet au DOM de rester valide comme document xhtml 1.0)

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

5. Enfin, j'utilise la méthode toDataURL() de l'élément src pour obtenir une image codée en base64 pour le cadre et la placer dans l'attribut canvas.toDataURL('image/jpeg', quality) de l'élément quality.

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

Ce faisant, vous faites en sorte que les objets javascript lisent une vidéo hors du DOM et insèrent chaque image dans un élément <=> DOM. Vous pouvez donc lire la vidéo en utilisant les fonctionnalités HTML5 du navigateur, mais sans avoir besoin d'un document HTML5.

Et si le navigateur ne dispose pas de fonctionnalités HTML5 ou s’il ne peut pas gérer le codec utilisé, il se rabattra sur le comportement natif <=> (en général ... le navigateur recherchera un plugin tel que VLC, ou ainsi de suite ...)

Et s’il n’existe aucun moyen de lire la vidéo (pas de plug-in), le contenu alternatif fourni à l'intérieur de la balise <=> sera utilisé.

Aspect performance: la lecture risque de scintiller, ce qui entraîne un processus très consommateur de ressources ... Pour éviter cela, vous pouvez réduire la qualité du rendu en utilisant la compression jpeg comme suit: <=> où <=> est une valeur comprise entre 0 et 1.