11550 sujets

JavaScript, DOM et API Web HTML5

[HTML5] Problème de video sous firefox

Bonjour à tous,

Voila, n'étant pas un pro du web, j'ai beau rechercher, je ne trouve pas de solutions à mon problème.
Je m'explique, je souhaite intégrer une vidéo en html5 avec la balise <video> sous Firefox et chrome, pour le cas de IE, je le gère avec flowplayer en flash.
Sur mon pc de développement, tout fonctionne impeccablement, sur tous les navigateurs.
Quand j'arrive sur mon environnement de production, les choses se corsent :
tout est OK pour IE, mais sur Firefox, j'obtiens une un cercle de chargement infini...

Voici un extrait de mon code :

<video class="video-js" width="360" height="264" poster="<%=request.getContextPath()%>/videos/fond.png" controls preload="none">
<source src="<%=request.getContextPath()%>/videos/film.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="<%=request.getContextPath()%>/videos/film.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="<%=request.getContextPath()%>/videos/film.ogv" type='video/ogg;codecs="theora, vorbis"' />
<object class="vjs-flash-fallback" width="360" height="236" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" style="z-index:-1;">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />
<param name='wmode' value='transparent' >
<param name="flashvars" value='config={"clip":{"url":"<%=chemin%>/videos/film.mp4","autoPlay":false,"autoBuffering":true}}' />
<img src="<%=request.getContextPath()%>/videos/fond.png" width="360" height="264" alt="Carte de Voeux 2012" title="Erreur." />
</object>
</video>


J'ai essayer l'histoire des type MIME dans un htaccess, rien n'y fait.

Merci à vous d'avance!

Jérémy,
Modifié par jdenquin (07 Dec 2011 - 16:15)
Bonjour,

sur Chrome, est-ce que la vidéo se charge ..?
Sinon, il se pourrait que le fichier vidéo ne soit simplement pas trouvé.. Es-tu sur de ton "<%=request.getContextPath()%>" ? Tes fichiers sont bien présents ?
Pour ce qui est du request.getContextPath(), oui les fichiers sont bien présent puisqu'en faisant un clic droit sur la "video" enregistrer sous, je l'ai de suite!

Sur chrome tout fonctionne...

Pour info, l'application tourne sous OAS, je suis en train d'explorer les pistes pour rajouter des mime types au serveur d'application...
Bonsoir, même problème... une balise video avec source webm qui fonctionnait jusqu'à ce matin à arrêté de fonctionner sous firefox (osx et windows).

<video class="video-js" id="prevideo" width="400" height="226" autoplay="autoplay" controls loop="loop" poster="movies/poster.jpg" preloadid="prevideo">
   <source src="movies/video.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
   [b]<source src="movies/video" type='video/webm; codecs="vp8, vorbis"' />[/b]
   
   <!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->
                      
   <object class="vjs-flash-fallback" width="400" height="226" type="application/x-shockwave-flash" data="movies/player.swf">
      <param name="movie" value="movies/player.swf" />
      <param name="allowfullscreen" value="true" />
                        
      <!-- Image Fallback. Typically the same as the poster image. -->
      <img src="movies/poster.jpg" width="400" height="226" alt="" title="No video playback capabilities." />
   </object>
</video>


La requête au serveur est correcte mais la résponse donne un statut 206 Partial Content chose qui bloque la vidéo sur un loop eternel de l'image de chargement.

En chargeant une video OGG par contre tout fonctionne - sauf que sous Windows la video perd l'audio... donc c'est pas une solution, pour moi.
<source src="movies/video" type='video/ogg; codecs="theora, vorbis"' />

J'ai essayé d'enlever les attributs de <video> pas compatible avec firefox - comme p.e. loop - mais cela ne sert à rien.

Des news sur ce sujet? Vous avez pu résoudre?

Merci
Sujet clos
Aller à