1

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>

2 Answers 2

0

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

-1

You also should wrap your javascript code with CDATA

<![CDATA[
// js goes here
]]>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.