YouTube html5 playlists not working in IE9

StackOverflow https://stackoverflow.com/questions/13869158

Question

I am creating a custom html5 player for youtube videos. I based it on the samples in the YouTube iframe API (https://developers.google.com/youtube/iframe_api_reference). As long as I am viewing it on a webserver, all of the javascript controls for pause/play/stop work fine in Chrome/FF/IE9, but the previous video in playlist/next video in playlist controls only work in Chrome and FF. in IE, I get a "This video is currently unavailable" (the first video in the playlist still plays just fine). This also happens if I try to switch to a specific video using its ID (loadVideoById).

I can see in the info bar at the top of the video that after I click "next video in playlist" it cycles through all the videos' names - I assume it attempts to play each one and fails.

If I try to play any one of the videos in the playlist individually, it works fine.

When I return an array of all the videos in the playlist via the console/alert/whatever, everything expected is there. Code below:

<!doctype html>
<html>
    <head>
        <title>custom youtube player</title>
    </head>
    <body>
        <div id="player"></div>
        <br/>
        <a onclick="player.playVideo();" href="#">play</a>
        <br/>
        <a onclick="player.pauseVideo();" href="#">pause</a>
        <br/>
        <a onclick="player.stopVideo();" href="#">stop</a>
        <br/>
        <a id="playPrev" onclick="player.previousVideo();" href="#">previous video in playlist</a>
        <br/>
        <a id="playNext" onclick="player.nextVideo();" href="#">next video in playlist</a>
        <script type="text/javascript">
            var tag = document.createElement('script');
            tag.src = "//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', {
                    height: '390',
                    width: '640',
                    playerVars: { 'showinfo': 1, 'controls': 1},
                    videoId: 'ZrG0WsDuriM',
                    events: {
                        'onReady': onPlayerReady
                    }
                });
            }
            function onPlayerReady(event) {
                event.target.playVideo();
                event.target.loadPlaylist({listType: 'playlist', list: 'PL8D3EFFBB747B9769', suggestedQuality: 'small'});
            }
        </script>
    </body>
</html>
Was it helpful?

Solution

For anyone who found this question, this issue was apparently a bug on the YouTube side and appears to have since been resolved.

OTHER TIPS

You also should wrap your javascript code with CDATA 

<![CDATA[
// js goes here
]]>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top