在文档加载时在弹出窗口中显示和自动播放 youtube 视频答案

【问题标题】：Display and autoplay youtube video in popup on document load在文档加载时在弹出窗口中显示和自动播放 youtube 视频
【发布时间】：2020-12-08 13:27:15
【问题描述】：

我正在尝试在文档加载 5 秒后在弹出窗口中自动播放 youtube 视频，不幸的是，它不起作用：

我从教程中获取了这段代码，视频在点击时播放，但我真正需要的是在页面加载后自动显示视频，无需用户进行任何操作。我尝试通过添加$(document).ready 自己修改代码，但不幸的是，它没有按预期工作。任何帮助将不胜感激 - 谢谢！

$(document).ready(function() {
    setTimeout(function() {
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api"; 
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;

        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '315',
                width: '560',
                videoId: 'jNQXAC9IVRw',
                events: {
                    'onStateChange': onPlayerStateChange
                }
            });
        }


        function onPlayerStateChange(event) {
            if (event.data == YT.PlayerState.PLAYING) {
                //player is playing
            } else {
                //player is paused
            }
        }

        function stopVideo() {
            player.stopVideo();
        }

        function playVideo() {
            player.playVideo();
        }

        function pauseVideo() {
            player.pauseVideo();
        }


        $(document).on('opened.fndtn.reveal', '[data-reveal]', function() {
            playVideo();
        });

        $(document).on('closed.fndtn.reveal', '[data-reveal]', function() {
            pauseVideo();
        });
    }, 5000); // 5000 to load it after 5 seconds from page load
});

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div id="myModal" class="reveal-modal" data-reveal>
    <h2>Video</h2>
    <div id="player"></div>
    <a class="close-reveal-modal">&#215;</a>
  </div>

编辑

我已经添加了 jQuery，但是视频没有加载也没有播放，任何帮助将不胜感激。

【问题讨论】：

标签： javascript html jquery

【解决方案1】：

您的意思是视频没有自动播放吗？这可能是因为autoplay policy

以下是上述链接的要点-

Chrome 的自动播放策略很简单：

始终允许静音自动播放。
在以下情况下允许自动播放声音：

一个。用户与域进行了交互（点击、点击等）。

b.在桌面设备上，用户的媒体参与指数阈值已被超过，这意味着用户之前播放过有声视频。

c.用户已将网站添加到移动设备的主屏幕或在桌面设备上安装 PWA。
顶级框架可以将自动播放权限委托给其 iframe 以允许自动播放声音。

您可以将播放器静音以确保其自动播放。

我刚刚从youtube iframe_api reference 复制了代码并在播放器就绪时将播放器静音，它可以工作 -

请检查以下代码 -

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
</style>
  <body>
    <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
    <div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    
    <div id="player"></div>
  </div>

</div>

    <script>
    // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'M7lc1UVf-VE',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
            player.mute();
      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    $(document).ready(function() {
    // When the user clicks anywhere outside of the modal, close it
    $("#myModal").find(".modal-content .close").click(function(){
     $("#myModal").hide();
    });
    setTimeout(function() {
        $("#myModal").show();
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        }, 5000); // 5000 to load it after 5 seconds from page load
      });
    </script>
  </body>
</html>

相同的临时小提琴链接 - Youtube video muted autoplay

Fiddle for video in popup

【讨论】：

谢谢，但如何让它出现在弹出窗口中？
@julia2019，弹出窗口是什么意思？您是否使用引导程序或其他方式弹出模式？另外，我意识到您希望视频在文档准备就绪并在 5 秒超时后播放，因此我相应地更新了 snipper 和 jsfiddle。
@julia2019，在弹出窗口中显示视频 - jsfiddle.net/0fk12znu。注意弹出窗口将在 5 秒后打开。

【解决方案2】：

你必须调用这个函数：

onYouTubeIframeAPIReady()

在某个时候；否则player 将永远不会被初始化，所以视频永远不会加载。

此外，这个函数调用是唯一需要进入 setTimeout 函数的东西。您需要在调用此函数之前初始化并准备好其他所有内容。

所以这应该适合你：

setTimeout(function() {
  onYouTubeIframeAPIReady();
}, 5000);

并将其余代码移出setTimeout。

【讨论】：