유튜브에 컨트롤러 달기 정보
유튜브에 컨트롤러 달기본문
유튜브에 재생, 일시정지, 정지 버튼 및 타이머와 트랙바를 달아 보았습니다.
https://sir.kr/g5_tip/15757 의 깔끔형으로 걸었습니다.
트랙바는 가장 심플하게 만들었는데 버튼형이나 버튼 드래그형도 시간나면 만들 생각입니다.
최종으로 생각하고 있는 것이 가운데에 온오프 토글버튼이 들어간 테두리 원형 트랙바입니다.
기타 트랙바에 몇 퍼센트 로딩이 되었는지를 감지하는 로딩바도 적용해야 하고 볼륨바 및 풀스크린 토글버튼도 만들어야 하겠지요.
<script src=https://www.youtube.com/iframe_api></script>
<script>
trackWidth = 600; // 트랙바 가로픽셀
trackHeight = 10; // 트랙바 세로픽셀
leftColor = '#ff0000'; // 트랙바 좌측 색상
rightColor = '#eeeeee'; // 트랙바 우측색상
function onYouTubeIframeAPIReady() {
divPlayer = new YT.Player('iframePlayer', { events: {'onReady': onPlayerReady} });
}
function onPlayerReady(event) {
event.target.playVideo();
}
offMode = 1;
function ytMode() {
if (arguments[0] == 'stop') divPlayer.pauseVideo(), offMode = 0;
else if (arguments[0] == 'pause') divPlayer.pauseVideo(), offMode = 1;
else divPlayer.seekTo(divPlayer.getCurrentTime() * offMode), divPlayer.playVideo(), offMode = 1;
}
function youtubeState() {
youtubeTimer = setInterval(youtubeCurrent, 500);
}
function youtubeCurrent() {
currentTimer.innerText = ('0' + Math.floor(divPlayer.getCurrentTime() / 60)).slice(-2) + ':' + ('0' + Math.floor(divPlayer.getCurrentTime() % 60)).slice(-2);
totalTimer.innerText = ('0' + Math.floor(divPlayer.getDuration() / 60)).slice(-2) + ':' + ('0' + Math.floor(divPlayer.getDuration() % 60)).slice(-2);
trackMode(divPlayer.getCurrentTime() / divPlayer.getDuration() * trackWidth);
}
youtubeState();
function barMode() {
for (var i = 0; i < trackWidth; i++) document.write("<div id=bar_" + i + " class=trackClip onclick=seekBar(" + i + ")></div>");
}
function trackMode() {
for (var i = 0; i < trackWidth; i++) this['bar_' + i].style.background = i <= arguments[0] ? leftColor : rightColor;
}
function seekBar() {
trackMode(arguments[0]);
ytMode('play');
divPlayer.seekTo(divPlayer.getDuration() * arguments[0] / trackWidth);
}
function ytLoadPlayer() {
trackBar.style.width = trackWidth + 'px';
trackBar.style.height = trackHeight + 'px';
}
document.addEventListener('DOMContentLoaded', ytLoadPlayer);
</script>
<style>
#divPlayer { position:relative; padding-bottom:56.25%; height:0px; overflow:hidden; max-width:100%; }
.normalPlayer { position:absolute; top:0px; left:0px; width:100%; height:100%; display:block; }
.cutPlayer { position:absolute; top:-50%; left:0px; width:100%; height:200%; display:block; }
.trackClip { width:1px; cursor:pointer; float:left; height:100%; }
</style>
<div style=width:800px>
<div id=divPlayer><iframe id=iframePlayer class=cutPlayer src=https://www.youtube.com/embed/VlMEGBsw6j8?autoplay=1&loop=1&playlist=VlMEGBsw6j8&enablejsapi=1 frameborder=0 allowfullscreen></iframe></div>
<br>
<span id=currentTimer style=margin-right:20px>00:00</span>
<button onclick=ytMode('play') style=cursor:pointer>PLAY</button>
<button onclick=ytMode('pause') style=cursor:pointer>PAUSE</button>
<button onclick=ytMode('stop') style=cursor:pointer>STOP</button>
<span id=totalTimer style=margin-left:20px>00:00</span>
<br><br>
<div id=trackBar style="border:1px solid #cccccc"><script>barMode()</script></div>
</div>
----------
예제 - http://www.mediaplayer.kr/main/tip/12
!-->
추천
8
8
댓글 9개
감사합니다 잘 활용하겠습니다~~^0^b
@DawnDew 감사합니다. 유용하게 사용하세요.
와.. 저녁에 테스트 해보겠습니다!
@나나아아아엉 어이쿠 감사합니다.
감사합니다.
@너랑안놀아 예 유용하게 쓰세요
감사합니다!
감사합니다. ^^
감사합니다.