Question

如何在下面的代码中添加自动播放？

下面的HTML和JavaScript代码显示了一个简单的示例，它将YouTube播放器插入到id值为ytplayer的页面元素中。加载IFrame Player API代码时，将自动调用此处指定的onYouTubePlayerAPIReady（）函数。此代码不定义任何播放器参数，也不定义其他事件处理程序。

static

Answer 1

您必须在playVideo()事件上致电onPlayerReady。

function onPlayerReady(event) {
  event.target.playVideo();
}

完整代码如下：

<!DOCTYPE html>
<html>
    <body>
        <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
        <div id="player"></div>

        <script>
         // 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);

         // 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();
         }

         // 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();
         }
        </script>
    </body>
</html>

Answer 2

我之前已经在我的项目中完成了这个，所以请按照步骤

执行此操作

<强>步骤-1

添加我们的YouTube视频加载的iframe。像这样

<iframe width="100%" height="378" id="youtube_url" allowfullscreen="1" class="vjs-default-skin" src="https://www.youtube.com/embed/Rk6_hdRtJOE?wmode=opaque&enablejsapi=1&version=3&autoplay=0&controls=0&playerapiid=youtube_player&rel=0&showinfo=0" frameborder="0">
        </iframe>

<强>第二步

然后添加YouTube iframe API

<script src="https://www.youtube.com/iframe_api"></script>

<强>步骤-3

然后使用此代码创建YouTube API对象，并使用该代码来自动播放视频，如自动播放等。

 var  player = new YT.Player('youtube_videos_url', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }

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

此代码将在我们加载的视频player.playVideo();自动播放视频时运行。

我会帮助你。

Answer 3

您可以使用playerVars，并添加“自动播放”属性并将其设置为1

 var  player = new YT.Player('youtube_videos_url', {
        playerVars: { 'autoplay': 1 },
    });

将自动播放添加到ytplayer

3 个答案: