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

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.

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.

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

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

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>

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

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

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

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.

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.

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

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.

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

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