SUNKYUN.COM

JAVASCRIPT/JQUERY/AJAX

HTML/CSS JAVASCRIPT/JQUERY/AJAX PLUGIN

[javascript-jQuery] 유튜브 영상을 버튼으로 재생, 일시정지 하기

최고관리자
2018.02.20 10:45 8,625 0

본문

유튜브 영상을 버튼으로 재생, 일시정지 하기

Explanation
유튜브 iframe(자바스크립트) API : https://developers.google.com/youtube/iframe_api_reference?hl=ko
모든 정보는 구글 개발자 사이트를 통해 한글로 제공하고 있습니다.

소스보기
[html]
<!-- ABCDEFGHIJK = 영상코드 -->
 
<!-- button -->
<p id="play">재생</p>
<p id="pause">일시정지</p>



[javascript] 
jQuery(document).ready(function($){
    "use strict";
 
    $(window).load(function(){
        youtube_play_api(); //window가 로드되면 함수 실행
    }
 
    function youtube_play_api(){
    "use strict";
         
        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 player;
        setTimeout(function(){
            player = new YT.Player('youtube_video', {});
        }, 1000);
       
        $("#play").click(function(){
            if(player){
                var fn = function(){player.playVideo();}
                setTimeout(fn, 1000);
            }
        });
        
        $("#pause").click(function(){
             player.pauseVideo();
        }); 
    }
 
});


댓글목록 0

등록된 댓글이 없습니다.