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

J'ai passé beaucoup de temps à essayer de comprendre pourquoi les vidéos intégrées 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 à jouer automatiquement une fois la page chargée dans FireFox, mais ne peut pas effectuer la lecture automatique dans les navigateurs 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 des éditeurs de CMS.

42
demandé sur Adam Bubela 2013-08-01 16:53:37

14 réponses

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

Selon ce post dans developers.google.com , à partir de Chrome 53, l'option de lecture automatique est respectée par le navigateur, si la vidéo est coupée .

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

Extrait du lien ci-dessus:

Mise en sourdine autoplay pour la vidéo est pris en charge par Chrome pour Android à partir de la version 53. La lecture démarre automatiquement pour un élément vidéo Une fois qu'il est visible si autoplay et muted sont tous deux 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 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.
48
répondu Ram 2017-12-18 10:06:57

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 jolie mais fonctionne en quelque sorte.

Mettre à jour Récemment, de nombreux navigateurs ne peuvent que lire automatiquement les vidéos avec le son éteint, vous devrez donc ajouter l'attribut muted à la balise vidéo

<video autoplay muted>
...
</video>
44
répondu Adam Bubela 2018-09-20 09:10:25

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 autoplay 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 j'ai supprimé .wrap () jQuery autour de la balise vidéo et après cela, il a joué automatiquement comme prévu.

30
répondu Arnaud Leyder 2017-02-07 17:32:05

Pour moi, le problème était que l'attribut muted devait être ajouté dans 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>`
14
répondu GarryW 2018-02-14 17:30:18

Je viens d'avoir 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 la recherche, j'ai trouvé une solution:

Si je mets les attributs" preload " à "true", La vidéo démarre normalement

11
répondu Thomas Lohner 2014-07-10 09:11:09

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

Vous pouvez vérifier ici

Il suffit donc d'ajouter 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>
8
répondu mooga 2018-06-18 04:48:54

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);
7
répondu sanath_p 2016-11-24 05:47:11

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);
2
répondu Stijn Geukens 2014-11-24 15:20:27

C'est parce que maintenant chrome empêche la lecture automatique dans la vidéo html5, donc par défaut, ils ne permettront pas la lecture automatique. nous pouvons donc modifier ces paramètres en utilisant les paramètres de drapeau chrome. ce n'est pas possible pour le cas normal, donc j'ai trouvé une autre solution. ce travail est parfait... (ajouter 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
répondu Rijosh K 2018-05-24 05:44:28

Essayez ceci:

    <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, controls et autoplay ne nécessitent pas de valeur, ce sont des attributs booléens.

0
répondu Jared.DAGI 2013-08-01 13:58:55

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 voir si cela aide.

0
répondu MoritzGiessmann 2014-08-22 09:44:06

J'ai commencé avec la lecture de toutes les vidéos visibles, mais les vieux téléphones ne fonctionnaient pas bien. Donc, en ce moment, je joue la vidéo la plus proche du centre de la fenêtre et mets en pause le reste. 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
répondu ubershmekel 2017-10-28 05:14:24

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 après l'affichage de la page.

0
répondu Ceci Semble Absurde. 2018-01-10 09:42:44

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
répondu Ant0ha 2018-09-20 08:53:04