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 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.

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>

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.

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.

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>

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>`

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>

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'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);

Essaye ça:

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

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

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

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);

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.

Google a mis à jour la politique de lecture automatique. La lecture automatique ne fonctionne qu'en mode muet. Vérifiez le lien https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

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.

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();  

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;

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/

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.

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();
}

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.

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