💎증상발현 조건

수 많은 검색에도 iframe으로 보여주기 방식으론 이 문제를 해결할 수 없었다.
누구에게나 공개된 youtube iframe_api를 이용하면 위 문제를 해결할 수 있었다.

반복재생을 이용해야 한다면 동영상 퍼가기 방식에서 youtube iframe_api 방식으로 변경해 보도록 하자.

그누보드5/eyoom/classes/eyoom.class.php를 열어 // 수집된 동영상 정보를 iframe source로 구현를 검색한다.

수정 전

$source = '<iframe width="'.$video['width'].'" height="'.$video['height'].'" src="http://www.youtube.com/embed/'.$video['key1'].'?wmode=opaque&autohide=1'.$vlist.'" frameborder="0" allowfullscreen></iframe>';

수정 후

$source = '<div id="hplayer"></div><script type="text/javascript">var tag=document.createElement("script");tag.src="https://www.youtube.com/iframe_api";var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);var hplayer;function onYouTubeIframeAPIReady(){hplayer=new YT.Player("hplayer",{videoId:'"'.$video['key1'].'",width:"0",height:"0",playerVars:{playsinline:1,rel:0,showinfo:0,showsearch:0,controls:0},events:{onReady:onPlayerReady,onStateChange:onPlayerStateChange}})}function onPlayerReady(a){a.target.playVideo()}function onPlayerStateChange(b){if(b.data==YT.PlayerState.PLAYING){}else{}if(b.data==YT.PlayerState.ENDED){var a=b.target;a.seekTo(0);a.playVideo()}};</script>';

수정 된 소스로 유튜브 돟영상을 스크립트를 이용해 제어할 수 있게 된다.

위 수정된 소스를 보기 좋게 예제로 풀어 쓰면 아래와 같다.

<div id="hplayer"></div>
<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 hplayer;
function onYouTubeIframeAPIReady() {
    hplayer = new YT.Player('hplayer', {
        videoId:  '동영상 고유 키',
        width: '0',
        height: '0',
        playerVars : {
            'playsinline' : 1,
            'rel' : 0,
            'showinfo' : 0,
            'showsearch' : 0,
            'controls' : 0,   
            },            
            events: {
            'onReady': onPlayerReady,    //동영상이 준비되면 발생하는 함수
            'onStateChange': onPlayerStateChange    //상태가 따른 함수, 재생, 정지 등
        }
    });
};
function onPlayerReady(event) {
    // 준비된 동영상을 재생
    event.target.playVideo();
}
function onPlayerStateChange(event) {
    if(event.data == YT.PlayerState.PLAYING) {
        //재생일 때
    } else {
        //정지일 때
    }
    //동영상이 끝나면
    if (event.data == YT.PlayerState.ENDED) {
        //대상 지정
        var hplayer = event.target;
        //처음으로 돌아가기
        hplayer.seekTo(0);
        //동영상을 재생
        hplayer.playVideo();
    }
};
</script>

🔎다중 유튜브 동영상을 제어하고자 할 경우 아래 소스를 활용하자.

<div class="youtube" data-url="'.$video['key1'].'"></div>
<script type = "text/javascript" >
var idList = [], urlList = [];
$(".youtube").each(function(i) {
    $(this).attr("id", "hplayer" + i);
    idList.push("hplayer" + i);
    urlList.push($(this).data("url"));
});
var tag = document.createElement("script");
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
    for (var i = 0; i < $(".youtube").length; i++) {
        var hplayerId = idList[i];
        var hplayer;
        hplayer = new YT.Player(hplayerId, {
            videoId: urlList[i],
            width: "360",
            height: "640",
            playerVars: {
                playsinline: 1,
                rel: 0,
                showinfo: 0,
                showsearch: 0,
                controls: 1
            },
            events: {
                "onStateChange": onPlayerStateChange    //상태가 따른 함수, 재생, 정지 등
            }
        });
        function onPlayerStateChange(a) {
            if (a.data == YT.PlayerState.ENDED ) {
                var hplayer = a.target;
                hplayer.seekTo(0);
                hplayer.playVideo();
            }
        };
    }
}
</script>

👉data-url가 $video['key1'] 값을 갖는 youtube 클래스명의 div를 먼저 생성하고 유튜브 iframe api를 통해 iframe으로 변경해 보여 준다.

---

💡유튜브 동영상을 스크립트로 제어하게 되면 좋은 점은 아래와 같다.