Youtube API 播放视频功能在 iframe 上不起作用

Question

我整天都在寻找解决方案，但找不到任何解决方案，所以这是我的问题：我正在尝试在我的网站上播放嵌入到另一个 iframe 的 youtube 视频，例如

内容管理系统 > youtubeapi.html

内容管理系统：<iframe src="youtubeapi.html" frameborder="0" width="100%" height="1000px"></iframe>

youtubeapi.html

<div class="btn-play" onclick="this.nextSibling.style.display='block'; this.style.display='none';">
    <img src="img/thumbnail.png"/>
</div>
<div style="display:none">
    <div id="player"></div>
</div>

youtubeapi.js

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
    height: '600',
    width: '100%',
    videoId: "videoid",
    playerVars: { 
        'autoplay': 1,
        'controls': 0,
        'wmode': 'opaque',
        rel: 0,
        enablejsapi:1,
        'origin': window.location.origin
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange,
    }
  });
}

function onPlayerReady(event) {
    event.target.playVideo();
}
function pauseVideo() {
    player.pauseVideo();
}
  
var done = false;
function onPlayerStateChange(event) {
    switch(event.data){
        case 0:
            player.stopVideo();
            break;
    }
}
function stopVideo() {
    player.stopVideo();
}

$(function(){
    $(".btn-play").on('click',function(){
        player.loadVideoById($("#videoid").val(), 0, "default");
        player.playVideo();
        console.log("play!",player.playVideo());
    
    });
})

希望大家能帮帮我:D

Answer 1

请将 'mute': 1 添加到您的 YouTube iframe 设置中 - 我读到有关在视频静音之前不会启用自动播放 - 这是浏览器的“安全”功能。

您可以在 Stack Overflow 中的其他问答中找到更多信息。

您可以查看以下来源以获取更多信息：

Autoplay Policy Changes | Web | Google Developers

Youtube API 播放视频功能在 iframe 上不起作用

Youtube API playvideo function not working on iframe

html

javascript

jquery

youtube-api