将自动播放添加到ytplayer中

如何将自动播放添加到下面的代码？

下面的HTML和JavaScript代码显示了一个简单的示例，该示例将YouTube播放器插入具有ytplayer的ID值的页面元素。当iFrame Player API代码加载时，此处指定的OnYoutubePlayerApiready（）函数被自动调用。此代码不能定义任何播放器参数，也不定义其他事件处理程序。

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

您可以使用playerVars，然后添加autoplay属性并将其设置为1

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

来源：https：//developers.google.com/youtube/player_parameters

您必须在onPlayerReady事件上调用playVideo()。

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>

我已经在项目中已经这样做了，请执行此操作

step-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>

step2

，然后添加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();自动播放您的视频。

我会为您提供帮助。

相关内容

最新更新

热门标签：