La lecture automatique de la vidéo ne fonctionne pas dans le navigateur de bureau Safari et Chrome


135

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

<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 la lecture automatiquement une fois la page chargée dans FireFox mais ne peut pas effectuer de lecture automatique dans les navigateurs basés sur Webkit. Cela ne s'est produit que sur certaines pages aléatoires. Jusqu'à présent, je n'ai pas pu trouver la cause. Je soupçonne des balises non fermées ou des JS étendus créés par les éditeurs de CMS.


ça marche parfois? ou ne fonctionne pas du tout ... voici un exemple w3schools.com/tags/tryit.asp?filename=tryhtml5_video_autoplay que je vérifie avec chrome, et cela fonctionne.
tanaydin

Sur certaines pages, cela ne fonctionne pas du tout
Adam Bubela

Face au même problème, a bien fonctionné il y a une semaine et sans aucun changement, il a simplement cessé de fonctionner. C'est peut-être une mise à jour du navigateur, très ennuyeux d'avoir à lire manuellement toutes les balises vidéo via javascript
bingeScripter

Ne fonctionne pas pour moi dans Chrome.
Bob the Builder

Réponses:


263

La meilleure solution que j'ai pu obtenir était d'ajouter ce code juste après le </video>

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

... pas joli mais fonctionne en quelque sorte.

MISE À JOUR Récemment, de nombreux navigateurs ne peuvent lire automatiquement les vidéos que si le son est désactivé, vous devrez donc également ajouter un mutedattribut à la balise vidéo

<video autoplay muted>
...
</video>

1
Ou vous pouvez coder avec jQuery $("videoID").get(0).play(); stackoverflow.com/questions/4646998/…
Penguin

8
Ou comme ça:$("video[autoplay]").each(function(){ this.play(); });
Martin

2
toujours problème si ce n'est pas mis en
dovid

5
cela ne fonctionnera pas plus sans interaction de l' utilisateur AFAIK
webkit


94

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

Selon cet article dans developer.google.com , à partir de Chrome 53, l'option de lecture automatique est respectée par le navigateur, si la vidéo est désactivée .

Ainsi, l'utilisation d' autoplay mutedattributs dans la balise vidéo permet à la vidéo d'être lue automatiquement dans les navigateurs Chrome à partir de la version 53.

Extrait du lien ci-dessus:

La lecture automatique désactivée pour la vidéo est prise en charge par Chrome pour Android à partir de la version 53. La lecture commencera automatiquement pour un élément vidéo une fois qu'il apparaîtra si les deux autoplayet mutedsont définis [...]

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

3
J'ai eu ce problème dans Safari 11 où une vidéo d'arrière-plan (sans audio) ne serait pas lue automatiquement. Ajout mutedet a autoplayfait l'affaire. Merci!
dmbaughman

1
Alors pourquoi la lecture automatique, AVEC le son activé, fonctionne-t-elle pour YouTube? Cela a fonctionné de cette façon depuis la création du site.
Xavier le

32

Il arrive que Safari et Chrome sur le bureau n'aiment pas la manipulation DOM autour de la balise vidéo. Ils ne déclencheront pas l'ordre de lecture lorsque l'attribut de lecture automatique est défini, même si l'événement canplaythrough s'est déclenché lorsque le DOM autour de la balise vidéo a changé après le chargement initial de la page. Fondamentalement, j'ai eu le même problème jusqu'à ce que je supprime un jQuery .wrap () autour de la balise vidéo et après cela, il est lu automatiquement comme prévu.


2
Bon appel que cela ne fonctionne pas avec .wrap (). Cependant, pour autant que je sache, le code a besoin de .get (0) pour fonctionner: $ ("# vid"). Get (0) .play ();
mattsoave

3
@mattsoave .get(0)or just$('#vid')[0].play()
pmrotule

Octobre 2017, la vidéo ne se lisant pas automatiquement malgré l'attribut dans la balise est toujours un problème dans Safari. L'utilisation de [0] .play () comme suggéré par mattsoave / pmrotule a résolu le problème.
Don Cullen

25

Google vient de modifier sa politique en matière de lecture automatique des vidéos, cela 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>

Commentaire de John Pallett sur la nouvelle politique . Il est chef de produit et Media Muter de Google Chrome .
Doomjunky

24

Pour moi, le problème était que l' mutedattribut devait être ajouté dans la videobalise. C'est à dire:

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

Fonctionne pour le dernier Chrome sur Windows8
vladkras

Sur Crome si j'ajoute un son désactivé désactivé. Je ne veux pas ça
lisarko8077

17

Chrome ne permet pas la lecture automatique de la vidéo avec le son activé, alors assurez-vous d'ajouter un mutedattribut à la videobalise comme ceci

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

3
Cela n'ajoute rien de nouveau. La réponse acceptée le mentionne déjà. La deuxième réponse entre également dans les détails.
Samuel Philipp

12

J'ai juste 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écharge" sur "vrai", la vidéo démarre normalement


L'attribut de préchargement est ignoré par le navigateur si la lecture automatique est présente.
Sedat Başar

9

L'ajout du code ci-dessous au bas de la page a fonctionné pour moi. Je ne sais pas pourquoi cela fonctionne :(

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

2
la raison en est que vous attendez que la vidéo soit chargée dans la mémoire tampon puis que vous la jouez.
Joseph Briggs

9

Essaye ça:

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

5

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

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


3

Aucune des autres réponses n'a fonctionné pour moi. Ma solution de contournement était de 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);

Rien n'a fonctionné sur Chrome non plus. Avec le correctif .play () (hack) ci-dessus, j'obtenais une exception DOMException "Uncaught (in promise): La requête play () a été interrompue par un appel à pause ()." dans la console. Il y avait quelques autres fonctions jQuery sur la page, alors j'ai pensé qu'une minuterie donnerait à Chrome suffisamment de temps pour se régler. Ça a marché. J'ai défini un minuteur de 0,5 seconde dans $ (document) .ready ()
From Orbonia

3

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

Nous avons ajouté un troisième attribut "playinline" au code et cela a résolu le problème pour les utilisateurs iOS.

Ce correctif est spécifique aux vidéos qui doivent être lues 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 lecture en ligne continueront à nécessiter le mode plein écran pour la lecture sur iPhone. Lorsque vous quittez le plein écran avec un geste de pincement, les éléments sans lecture en ligne continueront à être lus en ligne.



2

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 fais normalement. La boucle, les contrôles et la lecture automatique ne nécessitent pas de valeur, ce sont des attributs booléens.


2

Ceci est dû au fait que Chrome empêche maintenant la lecture automatique dans la vidéo html5, donc par défaut, ils n'autorisent pas la lecture automatique. afin que nous puissions modifier ces paramètres à l'aide des paramètres du drapeau chrome. ce n'est pas possible pour un cas normal, j'ai donc trouvé une autre solution. cela fonctionne parfaitement ... (ajoutez preload = "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

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;

1

Sur l'iPhone Safari, lorsque le niveau de beurre est faible et que l'iPhone est en mode faible consommation, il ne sera pas lu automatiquement, même si vous avez les attributs suivants: lecture automatique, boucle, coupée, lecture en ligne définie sur votre balise html vidéo.

Me promener, j'ai trouvé que le travail consiste à avoir un événement de geste utilisateur pour déclencher la lecture vidéo:

document.body.addEventListener("touchstart", function () {
    var allVideos = document.querySelectorAll('video');
    for (var i = 0; i < allVideos.length; i++) {
        allVideos[i].play();
    }
},{ once: true });

vous pouvez en savoir plus sur les gestes de l'utilisateur et les politiques vidéo pour iOS sur le site Webkit:

https://webkit.org/blog/6784/new-video-policies-for-ios/


0

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

J'ai commencé par lire toutes les vidéos visibles, mais les anciens 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 mets le reste en pause. Vanilla JS. Vous pouvez choisir l'algorithme que 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

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

Essayez d'échanger autoPlaycontre autoplay.

Cela semble parfois sensible à la casse. Très bizarre car cela a fonctionné comme autoplaypour moi, mais seulement si j'incluscontrols

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.