web-dev-qa-db-fra.com

La vidéo "Lecture automatique" HTML 5 ne démarre pas automatiquement en CHROME

J'ai le code suivant:

<video controls autoplay>
  <source src="video/myVideo.mp4" type="video/mp4"> 
  <source src="video/myVideo.webm" type="video/webm">
  <source src="video/myVideo.ogv" type="video/ogg">   </video>

La vidéo:

  1. affiche bien dans Chrome et Firefox
  2. Dans Firefox, il se passe comme prévu
  3. Dans Chrome, il affiche mais pas "autostarts". C'est le problème.
  4. Si je clique dessus (sous Chrome), tout se passe bien

A tenté

<video controls autoplay>...</video>
<video controls autoplay="1">...</video>
<video controls autoplay="autoplay">...</video>

Rien n'a fonctionné dans Chrome

Ensuite, j'ai aussi essayé de changer le codec, comme recommandé dans https://en.wikipedia.org/wiki/HTML5_video , mais cela n'a pas fonctionné:

<source src="movie.webm" type='video/webm; codecs="vp8.0, vorbis"'>
    <source src="movie.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="movie.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>

Alors maintenant, je suis dans une impasse. Merci pour tous les pointeurs! Très appréciée.

google-chromehtml5-video
29
jon

Vous devez ajouter playsinline autoplay muted loop, chrome ne permet pas à une vidéo de démarrer automatiquement si elle n’est pas mise en sourdine, mais je ne sais pas pour le moment pourquoi elle ne fonctionne pas sur tous les appareils Android. Je vous tiens au courant

Problème avec Chrome: Après quelques recherches, j’ai constaté que cela ne fonctionnait pas parfois avec Chrome, car vous pouvez activer l’économiseur de données en mode responsive et bloquer la vidéo à démarrer automatiquement.

62
sebas sierra

Je viens de lire this article, et il dit:

Important: l’ordre des fichiers vidéo est vital; Chrome a actuellement un bogue dans lequel il ne jouera pas automatiquement une vidéo .webm si elle vient après autre chose.

Il semble donc que votre problème serait résolu si vous mettiez le fichier .webm en premier dans votre liste de sources. J'espère que cela pourra aider.

5
ahutch

Ce n'était peut-être pas le cas au moment où la question a été posée, mais à partir de Chrome 66, autoplay est bloqué.

http://bgr.com/2018/04/18/google-chrome-66-download-auto-playing-videos-block/

5
extremeandy

Essayez ceci quand j’essaie de donner en sourdine, regardez cette démo dans codpen

    <video width="320" height="240" controls autoplay muted id="videoId">
  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

scénario

function toggleMute() {

  var video=document.getElementById("videoId");

  if(video.muted){
    video.muted = false;
  } else {
    debugger;
    video.muted = true;
    video.play()
  }

}

$(document).ready(function(){
  setTimeout(toggleMute,3000);
})
3
Techno Deviser

Cette question est grandement décrite ici
https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

TL; DR Vous pouvez toujours lire automatiquement des vidéos muted

De plus, si vous souhaitez lire automatiquement des vidéos sur iOS, ajoutez l'attribut playsInline, car par défaut, iOS essaie de passer en mode plein écran.
https://webkit.org/blog/6784/new-video-policies-for-ios/

2
Dmitry Naumov

Essaye ça:

<video src="{{ asset('path/to/your_video.mp4' )}}" muted autoplay loop playsinline></video>

Et mettez ceci js après cela:

window.addEventListener('load', async () => {
  let video = document.querySelector('video[muted][autoplay]');
  try {
    await video.play();
  } catch (err) {
    video.controls = true;
  }
});
2
Yahya

Extremeandy a mentionné que la lecture automatique de Chrome 66 était désactivée.

Après avoir examiné cette question, j'ai constaté que les vidéos muettes pouvaient toujours être lues automatiquement. Dans mon cas, la vidéo n'avait pas d'audio, mais l'ajout de la sourdine à la balise video a corrigé le problème:

J'espère que cela aidera les autres aussi.

1
skawars