javascript - Safari 11/YouTube API 错误。快速播放/暂停和无法自动播放

Question

这刚刚开始被用户报告给我。我花了很多时间探索我自己的代码中的错误，但它似乎与 Safari 11 (最新) 特别相关。

当使用 YouTube IFrame Embed API 的一个简单示例时，Safari 将在播放和暂停状态之间快速切换，直到它以暂停结束。

这不是该示例的最优化版本，因为这里有一些关于可能使它起作用的探索。我想跳过并自动播放，但它不会按预期方式工作。我尝试使用 start 和 playVideo，它们是记录在案的 YT API 示例。

我最近才确认这是一个错误，它解释了为什么示例中有一些冗长的参数。

注意事项:

• 有时视频会根据您刷新的次数播放，但这种情况很少发生。
• 自动播放标志通常会失败。
• 在此示例中使用 start 标志向前跳转，因为 startSeconds 不起作用。
• 代码示例适用于其他浏览器:Chrome、Opera、Firefox

这是您可能会在 Safari 的控制台中看到的图像，它显示了玩家状态 panic ，最终降落在 2(暂停)。

这是一个复制/粘贴代码示例，可以复制该错误。将它放入任何 HTML 文件中，您应该会看到它在 Safari 11 中失败。

<style>
    body, html, iframe {
        position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%;
        margin: 0;
        padding: 0;
        pointer-events: none;
    }
</style>


<script>
    var videoId = "9nwQ1F7oX-8";

    var playerVars = {
        autohide: 1,
        autopause: 0,
        autoplay: 1,
        cc_load_policy: "0",
        disablekb: 1,
        enablejsapi: 1,
        iv_load_policy: 1,
        modestbranding: 1,
        origin: "*",
        rel: 0,
        showinfo: 0,
        start: 122,
        version: 3
    };
</script>


<iframe id="ytplayer"
    frameborder="0"
    allowfullscreen="1"
    title="YouTube video player"
    width="100%"
    height="100%"
    x-src="https://www.youtube.com/embed/9nwQ1F7oX-8?enablejsapi=1&amp;origin=*&amp;rel=0&amp;version=3&amp;iv_load_policy=3&amp;modestbranding=1&amp;showinfo=0&amp;autohide=1&amp;disablekb=1&amp;autoplay=1&amp;autopause=0&amp;cc_load_policy=0&amp;startSeconds=30&amp;widgetid=1"
    src="https://www.youtube.com/embed/9nwQ1F7oX-8?enablejsapi=1&amp;origin=*&amp;start=122">
</iframe>


<script>
window.onYouTubeIframeAPIReady = function() {
    console.log("YouTube is ready!", videoId, playerVars);

    var api = new YT.Player("ytplayer", {
        width: "100%",
        height: "100%",
        videoId: videoId,
        playerVars: playerVars,
        events: {

            onError: function(e) {
                // 100 – The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.
                // 101 – The owner of the requested video does not allow it to be played in embedded players.
                // 150 – This error is the same as 101. It"s just a 101 error in disguise!

                console.warn("An error has occurred", arguments);
            },

            onReady: function() {
                // log
                console.log("YouTube player is ready to use");

                //
                api.playVideo();
            },

            onStateChange: function(e) {
                // log
                console.log("YouTube state change ", e);

                // Finished
                if (e.data == 0) {
                    console.log("Finished");
                }

                // Playing
                else if (e.data === YT.PlayerState.PLAYING) {
                    console.log("Playing");
                }

                // Pausing
                else if (e.data === 2) {
                    console.log("Pausing");
                }

                // Buffering
                else if (e.data === 3) {
                    console.log("Buffering");
                }
            }
        }
    });

}
</script>

<script src="https://www.youtube.com/iframe_api"></script>

Answer 1

我遇到过很多视频播放器的问题，尤其是在不同的浏览器和不同的设备上自动播放。

似乎自动播放功能和 API 播放/暂停相互混淆，导致播放器状态困惑。

最适合我的最终解决方案:

使用 playerVars 中的 'autoplay: 0' 将自动播放设置为关闭。 'api.playVideo();'您在“onReady: function()”中使用的应该从那里获取它，并将播放器带入“播放”状态。