我尝试在我的一个项目网页中为youtube视频和基于视频的音频文件创建委派菜单,所有这些都可以在FF,Safari,IE等中正常工作,Chrome除外。
我知道自版本66以来Chrome浏览器中的自动播放存在限制。(https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)
我得出结论,这可能是这里的问题,并通过播放静音来验证它,在chromes自动播放策略中有什么例外。
用户启动的游戏即使在chrome中也能正常工作。所以我想尝试的是将用户操作(点击外部播放按钮)委托给iframes视频以使其接受播放。
var player = YT.Player( ... )
var player_elem = $(iframe#youtube_x);
/* ... */
case "play":
// why mute?
// => https://developers.google.com/youtube/iframe_api_reference?hl=de#Autoplay_and_scripted_playback
// => https://stackoverflow.com/questions/50507985/youtube-iframe-api-auto-play-not-working-for-chrome-and-video-resolution-set-not
player.mute();
pauseAll(); // 4all player as p => p.pauseVideo()
player.playVideo();
setTimeout(function(){
player.unMute();
setTimeout(function(){
state = player.getPlayerState();
switch(state){
case 5: // positioning
case -1: // not started
case 0: // ended
case 2: // paused
Console.log("cant play content ...");
// player_elem.delegat() is deprecated
player_elem.on( 'click', null, event.data )
break;
case 3: // buffering
Notice.console.log("still buffering .. ");
case 1: // played
break;
}
}, 300);
delayedPlayerStateChanged(player_elem.attr("id"), ctrl_bar);
}, 100);
delayedPlayerStateChanged(player_elem.attr("id"), ctrl_bar);
break;
我需要一个片段来委托用户操作“播放”从我的页面获取iframe作为用户操作。这有可能在铬?
历史
首先我试着简单地添加一个提到(gesture-delegation article @github.com)
delegatestickyuseractivation="media"
但这对我不起作用(YTs playVideo()仅在YT视频iframe上直接交互后才有效)。我还发现了一篇关于委托发布的文章,但它还没有正确实现。本文建议使用
gesture="media"
改为使用html属性。
最后
..他通过告诉我(在JS开发控制台内)浏览器带来了解决方案iframe中不支持gesture =“media”,我应该尝试使用
allow="autoplay"
就是这样,尽可能简单。
<iframe id="youtube_{$vid.id}"
src="{$vid.uri}?{$vid.player_parameter}"
delegatestickyuseractivation="media"
allow="autoplay">
</iframe>
注意
此解决方案仅适用于主页上的用户交互,嵌入像youtube视频嵌入的媒体iframe。因此,对于chrome自动播放策略,它没有解决方法。它只是一种将用户交互委托给iframe以使其接受YT媒体控制命令的方法。