그러냐

유투브 외부제어 본문

javascript

유투브 외부제어

관절분리 2016. 1. 27. 18:24
반응형
유투브 외부제어

메뉴얼

<button type="button" title="" onclick="play();"><span>재생</span></button>

사용자가 만든 재생 버튼, play(); 함수 호출

<html>

<button type="button" title="" onclick="play();"><span>재생</span></button>

<button type="button" title="" onclick="pause();"><span>일시정지</span></button>

<button type="button" title="" onclick="stop();"><span>중지</span></button>

<br /><br />

<div id="pnl_issueVideoPlayer">

<!-- 플래시동영상 위치 영역 -->

</div>

<script type="text/javascript" src="https://www.youtube.com/player_api"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

<script type="text/javascript">

swfobject.embedSWF('http://www.youtube.com/v/TmFZeCrV314?enablejsapi=1&amp;playerapiid=&amp;version=3&amp;showinfo=0&amp;autoplay=0&amp;rel=0', 'pnl_issueVideoPlayer', '640', '360', '10', null, null, {allowfullscreen:'true', allowScriptAccess:'always'}, {id:'ytapiplayer'});

function onYouTubePlayerReady(playerId) {

ytplayer = document.getElementById("ytapiplayer");

};

function play() { //재생

if (ytplayer) {

ytplayer.playVideo();

};

};

function pause() { //일시정지

if (ytplayer) {

ytplayer.pauseVideo();

};

};

function stop() { //스탑

if (ytplayer) {

                        ytplayer.seekTo(0, true);

ytplayer.stopVideo();

};

};

</script>

</html>

데모

   
 

 


============================

안녕하세요. 예전에 작업해본걸 경험으로 말씀드리겠습니다. 여러가지 방식을 시도했었는데요, 결론부터 얘기하면 가장 쉬운 방법은jQuery 플러그인으로 control 하는 방법이었습니다. 


플러그인 주소)

예제)

1) 질문자 분께서 임베드 하시는 비디오가 http://www.youtube.com/watch?v=9bZkp7q19f0 이고 가로 530 픽셀, 세로 298 픽셀 이라면, ID는 9bZkp7q19f0 (마지막 watch?v= 뒤에 있는 부분) 이 됩니다.

2) <div id="youtube-player-container"></div> 를 비디오가 들어갈 공간에 넣어줍니다 (실제 iframe 코드는 필요없습니다).

3) 질문자 분께서 jQuery 를 통해 hide 하시는 엘리먼트가 #modal-video 라고 했을때:



자바스트립트 섹션에
$(document).ready(function () {


// Tikku's TubePlayer
// http://www.tikku.com/jquery-youtube-tubeplayer-plugin
// Embed Youtube videos using TubePlayer to enable pause on play
// 예제를 위해 모든 옵션 나열
jQuery('#youtube-player-container').tubeplayer({
  width: 530, // the width of the player
  height: 298, // the height of the player
  allowFullScreen: "true", // true by default, allow user to go full screen
  initialVideo: "9bZkp7q19f0 ", // the video that is loaded into the player
  preferredQuality: "default", // preferred quality: default, small, medium, large, hd720
  onPlay: function (id) { }, // after the play method is called
  onPause: function () { }, // after the pause method is called
  onStop: function () { }, // after the player is stopped
  onSeek: function (time) { }, // after the video has been seeked to a defined point
  onMute: function () { }, // after the player is muted
  onUnMute: function () { } // after the player is unmuted
});


// Pause videos on modal close
$('#modal-video').on('hidden', function () {
  jQuery('#youtube-player-container').tubeplayer("pause");
});


});


이렇게 넣어주시면 됩니다.

js 로 DOM 을 지우거나, 유튜브 API 를 직접 조정하려고 했거나, 다른 자잘한 hack 들은 자세히 기억은 안나지만 테스트를 통과하지 못했습니다. 코드가 적용된 실제 URL 은 http://dive.engineering.illinois.edu/ 입니다. 중간 재생 표시가 있는 이미지를 클릭하면 팝업이 뜨고, 재생 후 팝업을 닫으면 동영상이 멈추게 되어 있습니다.

코드 하단부분
js/jquery.tubeplayer.min.js 가 플러그인이고
js/jquery.custom.js 안에 플러그인을 사용한 코드가 있습니다.


반응형
저작자표시

'javascript' 카테고리의 다른 글

자바스크립트 urlencode(), urldecode(), rawurlencode(), rawurldecode()  (0) 2016.01.27
FORM 서브밋 시 return false 의 중요성  (0) 2016.01.27
모바일 웹 기기 식별하기  (0) 2016.01.27
tinymce 에디터 설치..  (1) 2016.01.27
자바스크립트 현재시간 구하기  (0) 2016.01.27
'javascript' Related Articles more