Веб-страница должна быть обновлена ​​для автоматического воспроизведения видео YouTube - как это исправить? - PullRequest
Новая
       53

Веб-страница должна быть обновлена ​​для автоматического воспроизведения видео YouTube - как это исправить?

1 голос
/ 04 мая 2020

Я использую видео на YouTube, встроенное в качестве фона для домашней / целевой страницы веб-сайта. Я хочу, чтобы он запускался автоматически, когда кто-то посещает эту веб-страницу, но есть сбой. Видео не воспроизводится автоматически при первом посещении веб-страницы, но если вы обновите sh страницу, видео будет воспроизведено автоматически. Как я могу получить видео для автоматического воспроизведения каждый раз? Это происходит для меня в Chrome и Firefox, поэтому может случиться и в других браузерах.

Для этого я использую API-интерфейс проигрывателя YouTube iFrame: https://jsfiddle.net/Sidders/69teu8zv/2/

<div id="home-video-container">
<div id="home-video"></div></div>

<script>
      var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('home-video', {
      height: '1080',
      width: '1920',
      videoId: '6142uv27UuY',
      playerVars: {
        'autoplay': 1,
        'playsinline': 0,
        'autohide': 1,
        'controls': 0,
        'showinfo': 0,
        'rel': 0,
        'cc_load_policy': 0,
        'suggestedQuality': 'highres'
        },
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }
  function onPlayerReady(event) {
    event.target.playVideo();
  }
  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(fadeVideo, 64000);
      done = true;
    }
  }
  function fadeVideo() {
        var video = document.getElementById("home-video-container");
        video.style.WebkitTransition = 'opacity 1s';
        video.style.MozTransition = 'opacity 1s';
        video.style.opacity = 0;
        video.style.filter  = 'alpha(opacity=0)';  // IE fallback
  }
</script>
...