Untitled

<!DOCTYPE HTML>
<html class="no-js">
<head>
<title> Demo </title>
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
<script src="//www.google.com/jsapi"></script>
<script src="./JS/swfobject.js"></script>
<script src="http://www.youtube.com/player_api"></script>
<script src="./JS/ytvp.js"></script>
<script type="text/javascript" src="./JS/modernizr.js"></script>
<script type="text/javascript" src="./JS/excanvas.js"></script>
<script type="text/javascript" src="./JS/jquery-ui-1.8.21.custom.min.js"></script>

<script>
var legacyCode=false; var subtitlesFromTranscript= false;
var player; var playerFS;  var playerParams;
</script>

<link rel="stylesheet" type="text/css" href="./jquery-ui-1.8.21.custom.css">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>

<div id="fullscreenVideo">
    <div id="playerFS">Oh dear, this is embrassing. Something has gone wrong...</div>
</div>
<div id="videoContainer">
    <div id="videoContainer_v">
        <div id="player">Oh dear! It would appear that your browser is unable to play video. Please consider upgrading to a modern browser like Chrome, Firefox or Internet Explorer 9 or make sure you have the latest version of Flash Player. <a href="http://get.adobe.com/flashplayer/"> Click here to get the Flash plugin</a>. If you think you are seeing this in error, press "control" and "F5" to delete the cache for this page.</div>

        <!--[if IE lt 9]>
        <script>
        if($.browser.msie){

            var params = { allowScriptAccess: "always" };
            var atts = { id: "player" };
            swfobject.embedSWF("http://www.youtube.com/v/_4nFh0CRNgo&enablejsapi=1&playerapiid=ytplayer&version=3&cc_load_policy=1&controls=0&modestbranding=0&rel=0&showinfo=0",
                               "player", "640", "360", "8", null, null, params, atts);
            }
            var paramsfs = { allowScriptAccess: "always" };
            var attsfs = { id: "playerFS" };
            swfobject.embedSWF("http://www.youtube.com/v/_4nFh0CRNgo&enablejsapi=1&playerapiid=ytplayerFS&version=3&cc_load_policy=1&controls=0&modestbranding=0&rel=0&showinfo=0",
                               "playerFS", "940", "660", "8", null, null, paramsfs, attsfs);

            legacyCode = true;
            subtitlesFromTranscript = true;
        </script>
        <![endif]-->

        <script>

            if(!Modernizr.video){ playerParams = {controls: '0', html5:'1', enablejsapi: '1', showinfo: '0', rel:'0', cc_load_policy:'1',theme:'light'};
            subtitlesFromTranscript = true; }
            else{
                playerParams = {controls: '0', enablejsapi: '1', showinfo: '0', rel:'0', cc_load_policy:'1',theme:'light'};
                subtitlesFromTranscript = false; }
            //Load player api asynchronously.
            var done = false;
            function onYouTubePlayerAPIReady() {
                player = new YT.Player('player', {
                  height: '360',
                  width: '640',
                  videoId: '_4nFh0CRNgo',
                   playerVars: playerParams,
                  events: {
                   // 'onReady': onPlayerReady,
                   // 'onStateChange': onPlayerStateChange
                  }
                });

                playerFS = new YT.Player('playerFS', {
                  height: '660',
                  width: '940',
                  videoId: '_4nFh0CRNgo',
                   playerVars: playerParams,
                  events: {
                   // 'onReady': onPlayerReady,
                   // 'onStateChange': onPlayerStateChange
                  }
                });

                 setInterval(playerinfo, 400);
                 playerinfo();
            }

            function onYouTubePlayerReady(playerId) {
                  ytplayer = document.getElementById("player");
                  player = ytplayer;
                  ytplayerFS = document.getElementById("playerFS");
                  playerFS = ytplayerFS;
                  ytplayer.playVideo(); setInterval(playerinfo, 400);playerinfo();

            }

        </script>


        </div>


        <div class="videoOverlay">
            <div id="controls">
                <div id="videoControls">
                    <span class="playpauseBtn">[p]</span>
                     <span class="fsBtn">[fs]</span>
                </div>
                <div class="progressBar">
                    <!--<div class="elapsed"></div>-->
                    <div id="slider_progress"></div>
                </div>


            </div>
        </div>
        <div id="currentSubtitle">-</div>

    </div>

    <div id="transcript">
            <h3>Video Transcript</h3>
                <span class="s" s="00:00:01" e="00:00:04">something here</span>

</div>


            Test time<div id="videoTime">0</div>


        <style>
        #fullscreenVideo{position:absolute; z-index:1000; top:0; left:0; width:100%; height:100%; min-height:100%; min-width:100%; display:block; background:#111; margin-right:auto; margin-left:auto; text-align:center;}
        #playerFS{margin-right: auto; margin-left:auto;}
        </style>
        <script>
        $(document).ready( function() {
            $('.fsBtn').click(function(e){
                    $("#fullscreenVideo").show();
                    player.pauseVideo();
                    /*var playerCurrentTime = player.getCurrentTime();
                    playerFS.seekTo(playerCurrentTime,true);*/
                    player.stopVideo();
                    playerFS.playVideo();

                });
            });
        </script>


</body>
</html>