player

by kalmarsh80

HTML

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div id='player_wrapper' style='display:inline-block;'>
    <div id="player" style='float:left;'></div>
    <div style='display:inline-block; width:560px; position:relative; top: -3px;background: #000;text-align: center;'>
        <div id='player_controls' style='opacity:0.2'>
            <a href="#" id="previous" onclick="previousVid()" class="btn btn-small"><i class="icon-fast-backward"></i></a>
            <a href="#" id="resume" onclick="playVid()" class="btn btn-small"><i class=" icon-play"></i></a>
            <a href="#" id="pause" onclick="pauseVid()" class="btn btn-small"><i class="icon-pause"></i></a>
            <a href="#" id="skip" onclick="skipVid()" class="btn btn-small"><i class="icon-fast-forward"></i></a>
        </div>
        <div class="progress active" style='height:6px; width:560px; margin: 5px 0 0 0;'>
            <div class="bar bar-danger" style="width:0%;"></div>
        </div>
    </div>
</div>
<br/>
<!--
<h2 id="vidTitle"></h2>  <span id='duration'></span>  <span id='elapsed'></span>

<br/>
<span id='bar'></span>
-->
<script src="http://www.youtube.com/player_api"></script>

JavaScript

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '315',
        width: '560',
        border: '0',
        videoId: 'a9s0DCQJq4I',
        playerVars: {
            enablejsapi: 1,
            showinfo: 0,
            rel: 0,
            controls: 0,
            version: 3
        },

        events: {
            'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
        }
    });
}

function pauseVid() {
    console.log(player);
    player.pauseVideo();
}

function playVid() {
    player.playVideo();
}
// autoplay video
function onPlayerReady(event) {
    event.target.setPlaybackQuality('tiny');
    event.target.setVolume(100);
    event.target.playVideo();
    $("#vidTitle").text(vidsTitleArray[currentVidCount]);
    $("#duration").text(event.target.getDuration());
}

// when video ends
function onPlayerStateChange(event) {
    var ev = event.target;
    var du = 0;
    var cur = 0;
    var all = 0;
    if (event.data === 0) {
        currentVidCount++;
        event.target.loadVideoById(vidsIdsArray[currentVidCount]);
        $("#vidTitle").text(vidsTitleArray[currentVidCount]);
        if (currentVidCount == vidsIdsArray.length) currentVidCount = 0;
    } else if (event.data === 1) {

        $("#duration").text(event.target.getDuration());
        $("#elapsed").text(event.target.getCurrentTime());
        //$(".bar").css('width', du+'%');
        setInterval(function () {
            var cur = Math.round(ev.getCurrentTime());
            var all = ev.getDuration();

            $("#elapsed").text(cur);
            du = cur / all * 100;
            $(".bar").css('width', du + '%');
            $("#bar").text(cur + "/" + all + " = " + du + '%');

        }, 1000); //polling frequency in seconds

    }
}

function previousVid() {
    currentVidCount--;
    if (currentVidCount < 0) currentVidCount = vidsIdsArray.length - 1;
   ...