2

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

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

<div id="ytplayer"></div>

<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
  height: '360',
  width: '640',
  videoId: 'M7lc1UVf-VE'
});
}
</script>
4

3 回答 3

1

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

 var  player = new YT.Player('youtube_videos_url', {
        playerVars: { 'autoplay': 1 },
    });
于 2019-06-16T15:14:59.003 回答
0

您将不得不调用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>
于 2017-06-20T06:39:50.020 回答
0

我之前已经在我的项目中完成了此操作，因此请按照以下步骤操作

步骤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>

第2步

然后添加 YouTube iframe API

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

第三步

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

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

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

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

我觉得它会帮助你。

于 2017-06-20T06:59:55.170 回答