Lecture automatique de la vidéo HTML5 sur iPhone

88

J'ai une sorte de problème étrange. J'essaie de créer un site Web avec une vidéo d'arrière-plan en boucle. Le code ressemble à celui-ci:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>
Développer l'extrait

Cela fonctionne parfaitement bien sur la plupart des navigateurs (IE a du mal avec cette chose d'ajustement d'objet mais cela ne me dérange pas) mais sur iPhone, la vidéo ne sera pas lue automatiquement, mais sur iPad, c'est le cas. J'ai déjà lu les nouvelles politiques pour iOS et je pense que je réponds aux exigences (sinon l'iPad ne sera pas lu automatiquement). J'ai fait d'autres tests:

  • La suppression des div superposés ne résoudra pas le problème
  • La suppression de z-index ne résoudra pas le problème
  • Le Wifi ou le cellulaire ne fait aucune différence
  • La taille du fichier vidéo ne fait pas non plus de différence

Est-ce que je fais mal ou est-ce que l'iPhone ne lit pas automatiquement les vidéos et nécessite toujours une interaction? Je ne me soucie que d'iOS 10, je sais que les exigences étaient différentes sur iOS 9

ios html video webkit autoplay SeBa
la source
Vous pourrez peut-être trouver de l'aide ici: stackoverflow.com/questions/41360490/... Personnellement, je n'ai pas encore de vidéo à lire automatiquement sur un iPhone, même après avoir suivi tous ces conseils et politiques d'Apple.
Mark
Il m'a fallu des heures pour comprendre. Pour essayer de sauver des heures de tout le monde, j'ai résumé mes conclusions dans un blog. J'espère que cela aide. medium.com/@BoltAssaults/…
BoltCoder

Réponses:

215

L' playsinlineattribut aide-t-il?

Voici ce que j'ai:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">
</video>

Voir le commentaire playsinlineici: https://webkit.org/blog/6784/new-video-policies-for-ios/

Pete Florence
la source
1
Halleluja! Merci pour cela, avait essayé une douzaine d'autres solutions en vain.
tolmark
23
playsinlinea travaillé pour moi en mutedgardant à l'esprit la bizarrerie du mode basse consommation sur iPhone
Ken
1
Voilà la réponse.
JCraine
1
playsinlineA sauvé la journée !!!! Merci mec. BTW, les nouvelles politiques de navigateur exigent que si vous souhaitez démarrer automatiquement une vidéo, la démarrer en mode silencieux ou vous ne pourrez pas le faire. 1 à @ken Exemple de chrome: [ developers.google.com/web/updates/2017/09/...
Nuno Prata
18
Si vous utilisez React, notez que l'attribut playsinlinedoit être écrit en camelCase: playsInline. Sinon, cela ne fonctionnera pas.
Quentin D
62

iOs 10+ permet la lecture automatique de la vidéo en ligne. mais vous devez désactiver le "mode faible consommation" sur votre iPhone.

Dilip Godhani
la source
2
bonne astuce mais j'ai une question à ce sujet que j'ai soumise: stackoverflow.com/questions/50400902/…
Mathieu
7
J'ai passé la dernière heure environ à essayer de comprendre pourquoi mes vidéos ne jouaient pas automatiquement. Merci pour ça!
lior
2
Merci pour ça!
Nikita Rogatnev
4
Il convient de mentionner que nous ne pouvons pas contrôler l'appareil de l'utilisateur et désactiver le mode faible consommation. La seule chose que nous pouvons faire est d'inviter l'utilisateur à "Désactiver le mode basse consommation" pour avoir une meilleure expérience
Muhammad Osama
1
Cela m'est arrivé aussi et m'a rendu fou jusqu'à ce que je trouve votre message. Je regardais déjà les spécifications de Safari 11 et 11.1 si elles étaient peut-être complètement désactivées en lecture automatique, mais ce n'était que le mode basse consommation ... une vie de développeur peut être difficile. :-)
haeki
7

Voici le petit hack pour surmonter toutes les difficultés que vous avez pour la lecture automatique de vidéos sur un site Web:

  1. Vérifiez que la vidéo est en cours de lecture ou non.
  2. Déclenchez la lecture de la vidéo lors d'un événement comme un clic ou un toucher du corps.

Remarque: certains navigateurs ne permettent pas la lecture automatique des vidéos à moins que l'utilisateur n'interagisse avec l'appareil.

Donc, les scripts pour vérifier si la vidéo est en cours de lecture sont: 

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
}});

Et puis, vous pouvez simplement lire automatiquement la vidéo en attachant des écouteurs d'événements au corps:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        }
        else {
            // video is not playing
            // so play video now
            videoElement.play();
        }
});

Remarque: l' autoplayattribut est très basique et doit être ajouté à la balise vidéo déjà autre que ces scripts.

Vous pouvez voir l'exemple de travail avec le code ici à ce lien:

Comment lire automatiquement une vidéo lorsque l'appareil est en mode basse consommation / mode d'économie de données / problème de navigateur Safari

Shakti
la source