时间戳

首页 > 解决方案 > 在文档加载时在弹出窗口中显示和自动播放 youtube 视频

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

问题描述

我试图在文档加载 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，但视频没有加载也没有播放，任何帮助将不胜感激。

标签： javascripthtmljquery

解决方案

你的意思是视频没有自动播放？这可能是因为自动播放政策

以下是上述链接的要点 -

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

  1. 始终允许静音自动播放。

  2. 在以下情况下允许自动播放声音：

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

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

    c.用户已将网站添加到移动设备的主屏幕或在桌面设备上安装了 PWA。

  3. 顶级框架可以将自动播放权限委托给其 iframe 以允许自动播放声音。

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

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

请检查以下代码 -

<!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 视频静音自动播放

弹出窗口中的视频小提琴

推荐阅读