[Youtube] LoadPlaylist function issues of the IFrame API (IFrame API 의 loadPlaylist 함수 이슈)

날짜:



문제

Youtube API (https://developers.google.com/youtube/iframe_api_reference)
를 보던중 문서에 표기되어 있는대로 프로그램을 작성했는데 아래의 함수가 작동이 되지 않는 문제가 있었다.
[정확히는 재생목록ID(playlist ID) 를 사용하면 잘 되지만 동영상ID(video IDs)를 사용하면 작동하지 않았다.]


player.cuePlaylist({listType:String,
                    list:String,
                    index:Number,
                    startSeconds:Number,
                    suggestedQuality:String}):Void

player.loadPlaylist({list:String,
                     listType:String,
                     index:Number,
                     startSeconds:Number,
                     suggestedQuality:String}):Void





인터넷을 찾아보니 다른사람들도 나와 비슷한 문제가 있는 듯 싶다.

1. http://stackoverflow.com/questions/9148227/youtube-player-api-list-with-videos
2. https://groups.google.com/forum/#!topic/youtube-api-gdata/8d0XsJwQ9dw
3. https://code.google.com/p/gdata-issues/issues/detail?id=6303













해결방법

아래와 같이 작성 시 정상적으로 동작한다.
(SyntaxHighlighter 문제로 <br/> 태그가 보이지 않는다.)

<!--
User: 1004lucifer
Date: 2015. 4. 15.
-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="gangnamStyleIframe"></div>
    <br/><br/>
    <button type="button" onclick="playYoutube();">Play</button>
    <br/>
    <button type="button" onclick="pauseYoutube();">Pause</button>
    <br/>
    <button type="button" onclick="stopYoutube();">Stop</button>
    <br/>
    <button type="button" onclick="loadPlaylist();">player.loadPlaylist</button>
    <br/>
    <button type="button" onclick="loadPlaylist_playlist_id();">player.loadPlaylist - playlist ID</button>
    <br/>
    <button type="button" onclick="loadPlaylist_video_ids();">player.loadPlaylist - video IDs</button>

    <script type="text/javascript">
        var tag = document.createElement('script');
        tag.src = "http://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('gangnamStyleIframe', {
                height: '315',
                width: '560',
                videoId: '9bZkp7q19f0',
                playerVars: {
                    controls: '2'
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
        function onPlayerReady(event) {
            console.log('onPlayerReady 실행');
        }
        var playerState;
        function onPlayerStateChange(event) {
            playerState = event.data == YT.PlayerState.ENDED ? '종료됨' :
                    event.data == YT.PlayerState.PLAYING ? '재생 중' :
                    event.data == YT.PlayerState.PAUSED ? '일시중지 됨' :
                    event.data == YT.PlayerState.BUFFERING ? '버퍼링 중' :
                    event.data == YT.PlayerState.CUED ? '재생준비 완료됨' :
                    event.data == -1 ? '시작되지 않음' : '예외';

            console.log('onPlayerStateChange 실행: ' + playerState);
        }

        function playYoutube() {
            player.playVideo();
        }
        function pauseYoutube() {
            player.pauseVideo();
        }
        function stopYoutube() {
            player.seekTo(0, true);
            player.stopVideo();
        }

        function loadPlaylist() {
            player.loadPlaylist(['wcLNteez3c4', 'LOsNP2D2kSA', 'rX372ZwXOEM'], 0, 0, 'large');
        }
        function loadPlaylist_playlist_id() {
            player.loadPlaylist({
                'list': 'UUPW9TMt0le6orPKdDwLR93w',
                'listType': 'playlist',
                'index': 0,
                'startSeconds': 0,
                'suggestedQuality': 'small'
            });
        }
        function loadPlaylist_video_ids() {
            player.loadPlaylist({
                'playlist': ['9HPiBJBCOq8', 'Mp4D0oHEnjc', '8y1D8KGtHfQ', 'jEEF_50sBrI'],
                'listType': 'playlist',
                'index': 0,
                'startSeconds': 0,
                'suggestedQuality': 'small'
            });
        }

    </script>
</body>
</html>



PS.
현재상황에서의 API문서(링크) 대로 작성 시 동영상ID(video IDs) 를 실행할 수 없다.
[API문서가 잘못된건지.. API가 잘못된건지 잘 모르겠다.]

참고: http://www.cgis.biz/others/youtube/player8/





관련링크: Player API 를 활용한 유튜브 동영상 컨트롤


댓글

댓글 쓰기