Video.js - Autoplay et Loop ne fonctionnent pas sur le téléphone

Question

J'utilise ce code pour faire en sorte qu'une vidéo (par exemple une bannière, donc pas de contrôles) passe automatiquement en boucle.

<video id="video1" class="video-js vjs-default-skin"
      controls width="900" height="500"
      poster="myposter.jpg"
      data-setup='{
        "controls": false,
        "loop": "true",
        "autoplay": true, 
        "preload": "true"}'>
         <source src="thisismyvideoyay.webm" type='video/webm' />
    </video>

Il fonctionne bien sur mon ordinateur, mais sur mon téléphone (Android OS 4.2.2 avec Chrome), il n'y a pas de lecture automatique ou de préchargement et il n'y a pas de boucle après la fin du film.

J'ai lu ceci sur la page Video.js :

Auto : lancer le chargement de la vidéo immédiatement (si le navigateur est d'accord). Certains appareils mobiles comme les iPhones et les iPads ne préchargent pas la vidéo afin de afin de protéger la bande passante de leurs utilisateurs. C'est pourquoi cette valeur est valeur est appelée "auto" et non pas quelque chose de plus définitif comme "true".

J'ai mis le préchargement à true mais il n'y a toujours pas de lecture automatique ou de boucle.

Est-ce une caractéristique de mon navigateur et comment puis-je éviter cela ?

J'ai essayé sur d'autres navigateurs :

• UC Browser ne semble pas du tout supporter le HTML5 ?
• Le navigateur standard affiche une petite icône vidéo mais ne montre pas non plus le lecteur.
• Même chose avec Maxthon

Answer 1

Pour résoudre le problème de la lecture automatique sur iOS, n'utilisez pas la fonction videojs. options pour lire automatiquement la vidéo.

En d'autres termes, cela ne fonctionnera pas :

<video id="my-video-id" autoplay></video>

Ça non plus :

videojs('my-video-id', {
    "autoplay": true
});

Au lieu de cela, attendez que l'objet vidéo se charge, puis déclenchez l'action de lecture :

videojs('my-video-id').ready(function() {
    this.play();
});

Answer 2

Sur un téléphone, il n'y a aucun moyen de le faire tourner en boucle ou de précharger des données. Mais j'ai une solution pour que vous puissiez la lire automatiquement. Vous pouvez utiliser mon code ici = http://www.andy-howard.com/recreate-bbc-iplayer/index.html

Et ajoutez simplement une fonction de clic supplémentaire sur le document prêt. Le navigateur du téléphone cliquerait alors sur l'image, qui convertirait à son tour les balises de données en balises vidéo, qui seraient ensuite converties en lecteur videojs, qui jouerait alors :)

J'espère que c'est utile.

Answer 3

Sur un mobile, vous pouvez faire une lecture automatique si vous mettez muted option

<video autoplay muted>
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
</video>

Chrome v53 : https://developers.google.com/web/updates/2016/07/autoplay

iOS 10 : https://webkit.org/blog/6784/new-video-policies-for-ios

Answer 4

Cela fonctionne pour moi, utilisez-le sur le tag vidéo

data-setup='{ "controls" : false, "autoplay" : true, "preload" : "auto", "loop":true }'

Answer 5

player.ready(function() {
  setTimeout(function() {
     player.play();
  }, 1000);
});