web-dev-qa-db-fra.com

Les vidéos en lecture automatique en mode muet cessent de jouer dans Safari 11.0

J'ai ces vidéos sur mon site avec les attributs énumérés ci-dessous:

<video width="100%" poster="poster_url.png" autoplay loop muted playsinline>
<source src="video_url.mp4" type="video/mp4">
</video>

Tout fonctionnait parfaitement jusqu’à l’installation de Safari 11. Cette version affiche les images des affiches et ne lit pas automatiquement les vidéos même si elles ne possèdent pas de piste audio. Jetez un coup d'oeil sur mon site .

J'ai vu des vidéos en lecture automatique fonctionner sur d'autres sites (même sans propriétés désactivées) sur mon propre ordinateur portable dans Safari.

Toute aide serait grandement appréciée!

htmlvideosafariautoplay
8
Andrey

Eh oui, il semblerait que Safari bloque également les vidéos en sourdine (qui n'ont même pas de son) ...

J'ai trouvé une solution de contournement, mais ce n'est pas joli et je n'en suis pas fier:

var ua = navigator.userAgent.toLowerCase();
var is_safari = (ua.indexOf("safari/") > -1 && ua.indexOf("chrome") < 0);
if(is_safari) {
    var video = document.getElementById('#video-element-id');
    setTimeout(function() {
       video.play();
    }, 50);
}

J'ai essayé de le faire sans délai, mais Safari le rejette en jetant un rejet de Promise ... Je ne sais pas pourquoi ...

5
Abayob

Je me suis aussi heurté à ce problème pour un court mp4 qui jouait à l'arrière-plan d'un site Web. J'ai réussi à faire fonctionner une solution pour iOS Safari 11 sans avoir recours à JS en qualifiant la balise vidéo avec controls="true" et playsinline. 

Exemple: 

<video autoplay loop playsinline muted controls="true" src="~/background.mp4" type="video/mp4"></video>

Remarque: Safari ne prend pas en charge .webm, alors ne soyez pas comme moi et luttez avec cela plus longtemps que vous ne voudriez l'admettre.

2
Ben Sampica

Le moyen le plus fiable que j'ai trouvé est d'assurer:

  • au moins une interaction utilisateur sur la page (chrome mobile)
  • attribut muet sur la balise (tout)
  • attribut playsinline sur la balise (safari)

Qui ressemble à ceci:

<style>
  video {
    display: none;
  }
  video.active {
    display: block;
  }
</style>
<button id="button">Show video</button>
<video id="video" muted playsinline></video>
<script>
    var button = document.getElementById('button');
    var video = document.getElementById('video');
    button.addEventListener('click', function() {
        video.className = 'active';
        video.src = url;
        video.play();
    });
</script>
1
Kim T

Placez l'attribut src dans la <vidéo> au lieu d'utiliser <source>

<video src="video_url.mp4" width="100%" poster="poster_url.png" autoplay loop muted playsinline></video>

Avec <source>, cela ne fonctionne que si l'élément est visible au chargement de la page (testé sur safari 11.0)

Un lien de Changements de stratégie de lecture automatique pour macOS .

0
CharlesBoury

J'ai rencontré un problème similaire et je l'ai résolu avec l'événement canplaythrough (ou l'événement canplay). Cela pourrait résoudre le besoin de setTimeout dans la solution d'Abayob:

const video = document.getElementById('#video-element-id');
video.oncanplaythrough = function() {
    video.play();
}
0
Adam Kiryk