CODEWITHSUNDEEP
javascripthtmlyoutubesafari
Matt Kenefick
Matt Kenefick

Reputation: 1206

Safari 11 / YouTube API bug. Rapid play/pause and failure to autoplay

This just started getting reported to me by users. I spent a bunch of time exploring my own code for bugs, but it seems like it's related specifically to Safari 11 (newest).

When using a simple example of the YouTube IFrame Embed API, Safari will rapidly switch between states of play and pause until it ends up on pause.

This is not the most optimized version of the example because there was some exploration in here as to what might make it work. I wanted to skip ahead and autoplay, but it wouldn't work the way it's supposed to. I tried using start and playVideo which are documented YT API examples.

I've only recently confirmed this to be a bug which explains why there's some verbose parameters in the example.

Notes:

Here's an image of what you might see in Safari's console, which shows the Player State panic, eventually landing on 2 (paused). Panic in the console

Here's a copy/paste code sample that will replicate the bug. Drop it in any HTML file and you should see it fail in 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>

Upvotes: 12

Views: 1447

Answers (1)

Fred Mantel
Fred Mantel

Reputation: 23

I have experienced many issues with the video players, especially getting autoplay working in different browsers and different devices.

It seems that the autoplay feature and the API play/pause are messing with eachother, resulting into the player state panic.

The final solution which worked best in my case:

Set autoplay to off , using 'autoplay: 0' in the playerVars. The 'api.playVideo();' your are using in your 'onReady: function()' should take it from there and will bring the player into ´play´ state.

Upvotes: 1

Related Questions