D3.js 를 사용하여 데이터 시각화하기 #1 Line Charts
2018-10-29
Javascript API를 이용해 유튜브 영상을 재생, 일시정지 합니다.
2014-10-29
Explanation
2018.10.26 수정사항
오래된 글인데.. 아직 찾아오시는 분들이 있어서 setTimeout으로 처리했던 영상의 로드시점 처리를 수정하였습니다.
|
1 2 3 4 5 6 7 |
[html] <iframe id="youtube_video" src="https://www.youtube.com/embed/ABCDEFGHIJK?version=3&enablejsapi=1"></iframe> <!-- ABCDEFGHIJK = 영상코드 --> <!-- button --> <p id="play">재생</p> <p id="pause">일시정지</p> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
[javascript] jQuery(document).ready(function($){ "use strict"; $(window).load(function(){ youtube_play_api(); //window가 로드되면 함수 실행 } function youtube_play_api(){ 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); // 영상이 준비되면 실행되는 함수 window.onYouTubeIframeAPIReady = function() { player = new YT.Player('youtube_video', {}); }; $("#play").click(function(){ if(!player || typeof player.playVideo === 'undefined') return; var fn = function(){player.playVideo();} setTimeout(fn, 1000); }); $("#pause").click(function(){ player.pauseVideo(); }); } }); |
