web-dev-qa-db-fra.com

problème vidéo html5 avec chrome

J'aimerais utiliser une vidéo html5 sur ma page Web, voici le code:

<video id="vid" width="100%" autoplay loop>
  <source src="video/video.webm" type="video/webm">
  <source src="video/video.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

Le problème est que, lorsque j'utilise webm en tant que source vidéo:

<source src="video/video.webm" type="video/webm">

cela fonctionne très bien sur chrome et FF . Mais dès que j'ajouter mp4:

<source src="video/video.webm" type="video/webm">
      <source src="video/video.mp4" type="video/mp4">

Chrome affiche un écran noir et le texte "En attente de vidéo", mais Safari et FF l’affiche comme prévu. 

Toutes les suggestions pour le faire jouer sur tous ces navigateurs seraient appréciées ... Merci.

html5google-chromehtml5-video
8
Ramtin Gh

C'est une solution que j'ai trouvée qui a fonctionné pour mon cas,

Tout d'abord, intégrez la vidéo dans votre html:

<video id="videoId" width="100%" autoplay loop>
  <source src="main.webm" type="video/webm">
  <source src="main.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

Puis détectez si le navigateur est chromé:

var isChrome = !!window.chrome; 
var isIE = /*@cc_on!@*/false;

Si c'est chromé, remplacez la vidéo par la version webm . (Pour ceux qui n'ont pas été confrontés eux-mêmes au problème: Si vous intégrez les fichiers mp4 et webm, chrome ne les lira pas. "webm" seulement)

if( isChrome ) {
$("#videoId").replaceWith($('<video id="videoId" width="100%" autoplay loop><source src="video.webm" type="video/webm"></video>'));
}

Et comme pour IE: Dans mon cas, j'ai remplacé la vidéo html5 par une image:

if( isIE ) {
$("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />'));
}
6
Ramtin Gh

J'avais le même problème et je ne pouvais le résoudre avec aucune des solutions proposées, que ce soit au-dessus ou dans d'autres threads (la mise à jour de la version de Google Chrome ou la désactivation de l'accélération matérielle de Chrome ne fonctionnait pas non plus.)

En fin de compte, ce qui a été résolu pour moi a été de convertir le fichier vidéo dans un autre format mp4.

Il s'est avéré que j'avais converti le MP4 d'origine avec un encodeur MP4 VIDEO, alors que j'aurais dû le faire avec un encodeur H.264 Normal. 

Voici le code complet:

<video width="320" height="240" controls>
  <source src="video/Ruby.ogv" type="video/ogg" />
  <source src="video/Ruby.webm" type="video/webm" />
  <source src="video/Ruby-iPad.mp4" type="video/mp4" />
   <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="240" id="Ruby" align="middle">
            <param name="movie" value="video/Ruby.swf" />
            <param name="quality" value="high" />
            <param name="bgcolor" value="#ffffff" />
            <param name="play" value="false" />
            <param name="loop" value="false" />
            <param name="menu" value="true" />
            <!--[if !IE]>-->
            <object type="application/x-shockwave-flash" data="video/Ruby.swf" width="330" height="295" id="Ruby">
                <param name="movie" value="video/Ruby.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#cccccc" />
                <param name="play" value="false" />
                <param name="loop" value="false" />
                <param name="menu" value="true" />
            <!--<![endif]-->
                <img src="video/Ruby.jpg" alt="No video playback capabilities" />
            <!--[if !IE]>-->
            </object>
            <!--<![endif]-->
        </object>
</video>
<p class="caption"><em>Ruby</em> (fragment), ICF Hastings 2013.</p>

Le code ci-dessus est une adaptation de la méthode "Video For Everybody". Vous trouverez plus d'infos sur http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/

J'utilise une ancienne version de Wondershare Video Converter mais vous pouvez faire le même travail à partir de services en ligne gratuits tels que http://video.online-convert.com/

4
Carme

Assurez-vous que vous avez le doctype HTML5:

<!DOCTYPE html>

Cela a résolu le problème pour moi.

3
Miki

Essayez de permuter les deux, mettez mp4 en premier et le code webm en second, et voyez ce qui se passe. J'ai ceci,

<div id="ModelVideo">
  <video max-width="100%" controls autoplay muted>
    <source src="movie1.mp4" type="video/mp4">
    <source src="movie1.webm" type="video/webm" controls>
    Your browser does not support the video tag.
  </video>
</div>

et le mien fonctionne bien en chrome, mon mp4, mais je ne peux pas le tester dans les autres navigateurs, bien que mes tests Dreamweaver soient également effectués dans Safari, et les deux semblent fonctionner correctement.

(ne rigole pas, travaille toujours sur le site web )

Peut-être que vous pouvez me faire savoir comment je peux contrôler avec succès le volume, semble avoir des problèmes avec celui-là.

2
Bat Sheva Sida

Le problème avec Chrome est qu’une fois que la vidéo est téléchargée, elle ne la lit pas.

Vous pouvez le résoudre en ajoutant un petit extrait de code javascript:

this.interval = setInterval(function(){
  this.countForVideo = document.getElementById('vid').readyState;
  if(this.countForVideo == 4){
    document.getElementById('vid').play();
    clearInterval(this.interval);
  }
},2000);

Cela vérifiera si la vidéo est téléchargée toutes les 2 secondes. Si la vidéo est téléchargée, il la lira et arrêtera l'intervalle.

0
Pavan Gadagi