有没有办法为嵌入式YouTube视频创建委派菜单（youtube autoplay chrome）

Posted 2021-04-04

我尝试在我的一个项目网页中为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媒体控制命令的方法。