web-dev-qa-db-fra.com

Chrome

Suivant Chrome et les vidéos de mise à jour automatique de Firefox récemment mises à jour ne sont plus prises en charge - j'ai essayé d'ajouter du code pour lire cela au démarrage, mais cela ne semble pas fonctionner?

    var vid = document.getElementById("attractor"); 

    function playVid() { 
        vid.play(); 
    }

Quelqu'un at-il trouvé une solution à ce problème?

Nous faisons beaucoup d'interactives à écran tactile et nous comptons sur cette méthode pour nos vidéos attracteurs.

google-chromeautoplay
4
alib0ng0

lecture automatique ne fonctionnera que si vous le spécifiez comme muet par défaut, comme ceci.

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

Ne vous inquiétez pas, les utilisateurs pourront réactiver la vidéo dans le cadre de l'élément vidéo html5.

14
Sabba Keynejad

J'ai trouvé un bon moyen de lire automatiquement la vidéo et d'éviter une erreur js dans la console.

const myVideo = document.getElementById('my-video');

// Not all browsers return promise from .play().
const playPromise = myVideo.play() || Promise.reject('');
playPromise.then(() => {
  // Video could be autoplayed, do nothing.
}).catch(err => {
  // Video couldn't be autoplayed because of autoplay policy. Mute it and play.
  myVideo.muted = true;
  myVideo.play();
});
<video id="my-video" src="https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_2mb.mp4">

Ce code essaie de démarrer la lecture automatique avec du son, et si ce n'est pas possible, il coupera la vidéo et lira automatiquement la vidéo sans son. Je pense que c'est un moyen optimal et empêche les erreurs JS.

4
Eugene

Selon mes propres observations et de nombreux articles comme celui-ci par exemple, Chrome bloque désormais la lecture automatique des vidéos, sauf si elles sont désactivées. Les vidéos avec le son activé ne peuvent être lues que par interaction avec l'utilisateur, par exemple un clic de souris ou un toucher tactile et ne peut pas être démarré par javascript.

En faisant cela, Google veut "(rendre) la lecture automatique plus cohérente avec les attentes des utilisateurs et [...] donner aux utilisateurs plus de contrôle sur l'audio" [1]

3
Tom Doodler
  1. Ajouter allow="autoplay;" à votre iframe comme ceci <iframe allow="autoplay;" ... >
  2. Lors de l'utilisation de la balise html5 video, j'ai remarqué que la vidéo doit être mise en sourdine pour la lecture automatique. La vidéo avec son ne voulait pas être lue. Voici comment intégrer des vidéos html5 https://www.w3schools.com/html/html5_video.asp . Si vous utilisez cette méthode, vous pouvez télécharger Miro Video Converter http://www.mirovideoconverter.com/ Utilisez-le pour encoder votre vidéo. Il fait un travail incroyable pour réduire les vidéos!
  3. Lors de l'intégration de YouTube ou de Vimeo, ajoutez ?autoplay=1, et in vimeo également autopause=0 à l'URL comme ceci: https://player.vimeo.com/video/{video_id}?autoplay=1&loop=1&autopause=0,
  4. Si vous travaillez avec YouTube et que vous rencontrez toujours des problèmes, utilisez l'API iframe https://developers.google.com/youtube/iframe_api_reference et lisez la vidéo en utilisant javascript:
function onPlayerReady(event) {
   event.target.playVideo();
}
  1. Lorsque vous utilisez une iframe et une vidéo YouTube, n'oubliez pas d'utiliser l'URL intégrée, et non l'URL vidéo standard https://www.youtube.com/embed/{video_id}
  2. Le gestionnaire de vidéos YouTube est ici: https://www.youtube.com/my_videos (Je ne trouve jamais le gestionnaire de vidéos YouTube dans l'interface en constante évolution!)

Solution recommandée:

  1. inscrivez-vous sur vimeo, téléchargez votre vidéo
  2. accédez aux paramètres de la vidéo, recherchez l'onglet "Intégrer" https://vimeo.com/manage/{video_id}/embed et configurez votre vidéo intégrée
  3. intégrez votre iframe:
<iframe frameborder="0"
  height="100%"
  width="100%"
  id="background-video"
  src="https://player.vimeo.com/video/356828095?autoplay=1&loop=1&autopause=0"
  allow="autoplay; fullscreen">
</iframe>

Celui-ci effectue la lecture automatique et la boucle. 4. Définissez la taille de votre vidéo à l'aide de css, f.e. width: 100%. 5. Maintenant, vous ne voulez pas avoir le cadre noir autour de la vidéo, redimensionnons donc l'iframe, faisons de la hauteur proportionnelle à la largeur. Dans mon cas, la vidéo est de 1920x1080px:

<script type="text/javascript">
var width = window.innerWidth;
var height = (width * 1080) / 1920

document.getElementsByTagName('iframe')[0].style.height = height + 'px';
</script>

Ma vidéo est lue en boucle comme arrière-plan de la page. J'ai désactivé les événements de souris comme celui-ci (dans vos styles CSS):

#background-video {
  pointer-events: none;
}

Faites-moi savoir si j'ai raté quelque chose, je mettrai à jour ces instructions!

1
mate.gwozdz

Je l'ai compris .... entrez ceci dans la barre d'adresse:

chrome://flags/#autoplay-policy

Et sélectionnez "Aucun geste de l'utilisateur n'est requis"

... cela ne fera évidemment que le faire fonctionner sur votre ordinateur!

0
alib0ng0