使用 loadVideoById() 函数自动播放 YouTube 视频不起作用

问题描述

我为自定义 youtube 播放器创建了一个小部件，该小部件显示多个视频，然后单击打开视频并使用 onYouTubeIframeAPIReady() 和 loadVideoById() 自动播放它。作为独立的小部件，一切正常。但是一旦我在 iframe 中使用这个小部件在其他页面上调用它，自动播放就不起作用。我不确定这有什么问题。下面是相同的示例代码。

var youtube_Ids = ["N71Nd-KLUSo","c35LK3qXJ5Q","Q8aFElBusk4","Kq7vz3Ju_a0","8sZ5maCXsh0","XI1FcgCDoZk","ayQEyZExXCQ","GGhTL8u-2IY","RKMFNIC4_bM","-41Sx2Izve4","Lfjo5LFse_8","Fi13t258FkA","_5WM_Lb33U4","-McEFfJCBqA","msKkKDi-4RI","_VTF3sWcBwE","f23dG3tFBTk","KcP_8KH37TU","n76Vl85U_zU","fPbhZJ4mlEI"];

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',{
        videoId: youtube_Ids[0],//'N71Nd-KLUSo',playerVars: { 'autoplay': 1,},events: {
        'onReady': onPlayerReady,'onStateChange': onPlayerStateChange
        }
    });
}
function onPlayerReady(event) {
    console.log('started');
   
}
function onPlayerStateChange(event) {        
     if(event.data === 0) {            
         console.log('done');
     }
}

$( document ).on( "click",".video-link",function(e) {
    e.preventDefault();
    var videoID = $(this).attr('data-videoID');  
    player.loadVideoById(videoID);

});


Works fine if i use this as independent widget. But as soon as use it as source for another iframe,it works fine except on clicking of a specific video,it doesnt autoplay and requires one more user action to play the video - 

   <iframe id="iframe1" scrolling="no" style="width:100%;border:none;height:100%;" src="http://example.com/youtubeplayer"></iframe>


Have tried using player.playVideo / event.target.playVideo() - inside onPlayerReady function with no success. Any Sort of help will be appreciated,as i am a newbie in iframes & this youtube APIs. 

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）