web-dev-qa-db-fra.com

La lecture vidéo automatique ne fonctionne pas dans les navigateurs de bureau Safari et Chrome

J'ai passé beaucoup de temps à essayer de comprendre pourquoi la vidéo intégrée était comme celle-ci:

<video height="256" loop autoplay muted controls id="vid">
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>

commence à jouer automatiquement une fois la page chargée dans FireFox mais ne peut pas exécuter la lecture automatique dans les navigateurs Webkit. Cela ne s'est produit que sur certaines pages au hasard. Jusqu'à présent, je n'ai pas pu trouver la cause. Je soupçonne des balises non fermées ou des fichiers JS étendus créés par des éditeurs de CMS.

javascripthtml5google-chromesafariwebkit
66
Adam Bubela

Le meilleur correctif que j'ai pu obtenir a été d'ajouter ce code juste après le </video>

<script>
    document.getElementById('vid').play();
</script>

... pas jolie mais en quelque sorte fonctionne.

UPDATE Récemment, de nombreux navigateurs ne peuvent lire automatiquement les vidéos sans son, vous devez donc ajouter l'attribut muted à la balise video 

<video autoplay muted>
...
</video>
98
Adam Bubela

Après avoir utilisé jQuery play() ou la manipulation DOM comme suggéré par les autres réponses, cela ne fonctionnait toujours pas (la lecture vidéo n'était pas en lecture automatique) dans Chrome pour Android (version 56.0).

Conformément à ce post in developers.google.com, à partir de Chrome 53, l'option de lecture automatique est respectée par le navigateur, si la vidéo est mise en sourdine.

Ainsi, l’utilisation des attributs autoplay muted dans la balise video permet la lecture automatique de la vidéo dans les navigateurs Chrome à partir de la version 53. 

Extrait du lien ci-dessus:

La prise en charge automatique de la vidéo en sourdine est prise en charge par Chrome pour Android à partir de la version 53. La lecture commencera automatiquement pour un élément vidéo dès qu'il sera visible si les deux noms autoplay et muted sont définis.

<video autoplay muted>
    <source src="video.webm" type="video/webm" />
    <source src="video.mp4" type="video/mp4" />
</video>
  • La lecture automatique désactivée est prise en charge par Safari sur iOS 10 et versions ultérieures.
  • La lecture automatique, en sourdine ou non, est déjà prise en charge sur Android par Firefox et le navigateur UC: ils ne bloquent aucun type de lecture automatique.
74
Ram

Il se trouve que Safari et Chrome on Desktop n’aiment pas les manipulations DOM autour de la balise vidéo. Ils ne déclencheront pas l'ordre de lecture lorsque l'attribut autoplay est défini même si l'événement canplaythrough s'est déclenché lorsque le DOM autour de la balise video a changé après le chargement initial de la page. Fondamentalement, j’ai eu le même problème jusqu’à ce que j’ai supprimé un jQuery .wrap () autour de la balise video et que, par la suite, il se lise automatiquement comme prévu.

31
Arnaud Leyder

Pour moi, le problème était que l'attribut muted devait être ajouté à la balise video. C'est à dire.: 

<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`
17
GarryW

Google vient de changer sa politique pour les vidéos à lecture automatique, il doit être muted 

Vous pouvez vérifier ici

alors ajoutez juste en sourdine 

<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
         <source type="video/mp4" src="video_file.mp4"></source>
         <source type="video/ogg" src="video_file.ogg"></source>
</video>
15
mooga

Je viens d'avoir maintenant le même problème avec ma vidéo

<video preload="none" autoplay="autoplay" loop="loop">
  <source src="Home_Teaser.mp4" type="video/mp4">
  <source src="Home_Teaser" type="video/webm">
  <source src="Home_Teaser.ogv" type="video/ogg">
</video>

Après recherche, j'ai trouvé une solution:

Si je règle les attributs "préchargement" sur "true", la vidéo démarre normalement

11
Thomas Lohner

Ajouter le code ci-dessous au bas de la page a fonctionné pour moi. Je ne sais pas pourquoi ça marche :(

 setTimeout(function(){
     document.getElementById('vid').play();
 },1000);
8
sanath_p

En effet, maintenant, chrome empêche la lecture automatique dans les vidéos html5. Par conséquent, ils ne permettent pas la lecture automatique. afin que nous puissions changer ces paramètres en utilisant les paramètres de drapeau chromé. ce n'est pas possible dans les cas normaux, j'ai donc trouvé une autre solution. cela fonctionne parfaitement ... (ajoutez précharge = "auto")

<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">


var herovide = document.getElementById('videoBanner');
       herovide.autoplay=true;
       herovide.load();
2
Rijosh K

Aucune des autres réponses n'a fonctionné pour moi. Ma solution de contournement consistait à déclencher un clic sur la vidéo elle-même; hacky (à cause du délai d'attente nécessaire) mais cela fonctionne bien:

function startVideoIfNotStarted () {
    $(".id_of_video_tag").ready(function () {
        window.setTimeout(function(){
            videojs("id_of_video_tag").play()
        }, 1000);
    });
}
$(startVideoIfNotStarted);
2
Stijn Geukens

var video = document.querySelector('video'); video.muted = true; video.play()

Seule cette solution m'a aidé, <video autoplay muted ...>...</video> n'a pas fonctionné ...

0
Ant0ha

Essaye ça:

  <video width="320" height="240"  autoplay muted>
            <source src="video.mp4" type="video/mp4">
  </video>
0
Ishan Lakshitha

J'ai résolu le même problème avec,

$(window).on('pageshow',function(){
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length;){
        vids[i].play();
    }
})

Vous devez lancer les vidéos une fois la page affichée.

0
Ceci Semble Absurde.

Essaye ça:

    <video height="256" loop autoplay controls id="vid">
     <source type="video/mp4" src="video_file.mp4"></source>
     <source type="video/ogg" src="video_file.ogg"></source>

C'est comme ça que je le fais normalement. loop, contrôles et autoplay ne nécessitent pas de valeur, ils sont des attributs booléens 

0
Jared.DAGI

Nous avons récemment abordé un problème similaire avec une vidéo intégrée et avons constaté que les attributs de lecture automatique et de mise en sourdine n'étaient pas suffisants pour notre implémentation. 

Nous avons ajouté un troisième attribut "playsinline" au code et le problème des utilisateurs iOS a été résolu. 

Ce correctif est spécifique aux vidéos à lire en ligne. De https://webkit.org/blog/6784/new-video-policies-for-ios/ :

Sur iPhone, les éléments seront désormais autorisés à jouer en ligne et ne passeront pas automatiquement en mode plein écran lorsque la lecture commencera . Les éléments sans attributs de jeu relies continueront à nécessiter le mode plein écran pour la lecture sur iPhone . Lorsque vous quittez le mode plein écran avec un geste de pincement, les éléments sans jeu en ligne continueront à jouer en ligne.

0
mingala

J'ai eu un cas où cela avait quelque chose à voir avec l'ordre des différents types de fichiers. Essayez de le changer et voyez si cela aide.

0
MoritzGiessmann

J'ai passé deux heures à essayer toutes les solutions mentionnées ci-dessus.

C'est ce qui a finalement fonctionné pour moi:

var vid = document.getElementById("myVideo");
vid.muted = true;
0
unicornherder

J'ai commencé par lire toutes les vidéos visibles, mais les vieux téléphones ne fonctionnaient pas bien. Alors maintenant, je joue la vidéo la plus proche du centre de la fenêtre et je fais une pause. Vanilla JS. Vous pouvez choisir quel algorithme vous préférez.

//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);

function isVideoPlaying(elem) {
    if (elem.paused || elem.ended || elem.readyState < 2) {
        return false;
    } else {
        return true;
    }
}
function isScrolledIntoView(el) {
    var elementTop = el.getBoundingClientRect().top;
    var elementBottom = el.getBoundingClientRect().bottom;
    var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
    return isVisible;
}
function playVideoClosestToCenter() {
    var vids = document.querySelectorAll('video');
    var smallestDistance = null;
    var smallestDistanceI = null;
    for (var i = 0; i < vids.length; i++) {
        var el = vids[i];
        var elementTop = el.getBoundingClientRect().top;
        var elementBottom = el.getBoundingClientRect().bottom;
        var elementCenter = (elementBottom + elementTop) / 2.0;
        var windowCenter = window.innerHeight / 2.0;
        var distance = Math.abs(windowCenter - elementCenter);
        if (smallestDistance === null || distance < smallestDistance) {
            smallestDistance = distance;
            smallestDistanceI = i;
        }
    }
    if (smallestDistanceI !== null) {
        vids[smallestDistanceI].play();
        for (var i = 0; i < vids.length; i++) {
            if (i !== smallestDistanceI) {
                vids[i].pause();
            }
        }
    }
}
function playAllVisibleVideos(timestamp) {
    // This fixes autoplay for safari
    var vids = document.querySelectorAll('video');
    for (var i = 0; i < vids.length; i++) {
        if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
            vids[i].pause();
        }
        if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
            vids[i].play();
        }
    }
}
function slowLooper(cb) {
    // Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
    // We could have listened to scroll+resize+load events which move elements
    // but that would have been more complicated.
    function repeats() {
        cb();
        setTimeout(function() {
            window.requestAnimationFrame(repeats);
        }, 200);
    }
    repeats();
}
0
ubershmekel