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:640px; 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:640px; margin: 5px 0 0 0;'>
            <div class="bar bar-danger" style="width:0%;"></div>
        </div>
        <div class="film_strip">
            <div class="film_click_left"><i class="icon-chevron-left"></i></div>
            <div class="film_body">
                <ul>
                    <li id='film_li_0' data-index='0' class='active'><img src='http://img.youtube.com/vi/a9s0DCQJq4I/default.jpg' /></li>
                    <li id='film_li_1' data-index='1'><img src='http://img.youtube.com/vi/IsUsVbTj2AY/default.jpg' /></li>
                    <li id='film_li_2' data-index='2'><img src='http://img.youtube.com/vi/j5-yKhDd64s/default.jpg' /></li>
                    <li id='film_li_3' data-index='3'><img src='http://img.youtube.com/vi/fd02pGJx0s0/default.jpg' /></li>
                </ul>
            </div>
            <div class="film_click_right"><i...

CSS

.film_strip{
    height:90px;
    width:640px;
    background:#444;
    position:relative;
    display:inline-block;
    top:5px;
}
.film_strip .film_click_left{
    width:20px;
    height:90px;
    background:#fff;
    position:absolute;
    left:0;
    top:0;
    display:inline-block;
    z-index:1;
    opacity:0.3;
}
.film_strip .film_click_left:hover {
    opacity:1;
    cursor:pointer;
}
.film_strip .film_click_left i{
    margin-top:38px;
}
.film_strip .film_click_right{
    width:20px;
    height:90px;
    background:#fff;
    position:absolute;
    right:0;
    top:0;
    display:inline-block;
    z-index:1;
    opacity:0.3;
}
.film_strip .film_click_right:hover {
    opacity:1;
    cursor:pointer;
}
.film_strip .film_click_right i{
    margin-top:38px;
}
.film_strip .film_body{
    width:600px;
    height:90px;
    background:#000;
    position:relative;
    display:inline-block;
    overflow:hidden;
    text-align:left;
}
.film_strip .film_body ul{
    position:relative;
    list-style:none;
    white-space: nowrap;
    width:100%;
    margin:0;
}
.film_strip .film_body ul li{
    width:160px;
    height:90px;
    display:inline-block;
    opacity:0.3;
}
.film_strip .film_body ul li:hover{
    cursor:pointer;
}
.film_strip .film_body ul li.active{
    opacity:1;
}
.film_strip .film_body ul li img{
    width:160px;
    height:90px;
}

JavaScript

var player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        height: '315',
        width: '640',
        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;
   ...