유튜브에 컨트롤러 달기 > 팁

• 목록

<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>