Click image to play video with specific time ability (multi-video)

Sample : Click image to play video with specific time ability (Test)

Date Updated : 1/1/2015

<style>
.Download{ width:96px; height:29px; background:url(//goo.gl/21zwdM) 0 0; cursor: pointer;}
.imgPanel { width: 640px; height: 390px; position: relative;}
.imgCursor {cursor: pointer;}
.imgStyle {    width: 640px; height:390px; margin-bottom:-3px;max-height:none;max-width:none}
.imgButton {background-image:url(//goo.gl/s6Mvdu);background-repeat:no-repeat;background-size:auto;background-position:0 0;cursor:pointer;height:72px;left:50%;margin:-39px 0 0 -39px;position:absolute;top:50%;width:72px}
.imgSubject{ width:25px; height:15px; background:url(//goo.gl/m93uCO) no-repeat 0 0; margin-left: 3px; cursor: pointer;}
.imgPanel:hover .imgButton{background-image:url(//goo.gl/s6Mvdu);background-repeat:no-repeat;background-size:auto;background-position:0 -73px}
tr.textbox {vertical-align: top; outline: 0px #ddd solid; position: relative;}
tr.HourLine {outline: 1px #aaa solid;}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//zeroclipboard-zclip-for-blogger.googlecode.com/svn/jquery.zclip.min.js"/> <!-- original : //www.steamdev.com/zclip/js/jquery.zclip.js -->
<script>// Jquery
    $(document).ready( function(){
        // Image is clicked
        $("img[class='imgStyle imgCursor']").click( function(){
            videoID = $(this).attr('id'); // get videoID
            createIframePlayer( videoID, 0 ); // create a player
        });
        // Button as Image is clicked
        $('.imgButton').click( function(){
            videoID = $(this).siblings('img').attr('id'); // get videoID from the img tag in the same layer ( children of Image Panel )
            createIframePlayer( videoID, 0 ); // create a player
        });
        // Time Link is clicked
        $("a#YVP").click( function(){
            createPlayer( $(this), videoID, seconds );
        });
        $('img#Subject').zclip({
            path:'//www.steamdev.com/zclip/js/ZeroClipboard.swf',
            copy:function(){return TextOfSubject( $(this) );}
        });
        // Tooltip only Text
        $('.masterTooltip').hover(
            function(){
                $('<p class="tooltip"></p>').text('Click to Copy (Ctr+C) and (Ctr+V) Share on FB').appendTo('body').fadeIn('slow'); // Hover over code 
            },function() {
                $('.tooltip').remove(); // Hover out code
            }).mousemove(function(e) {
                var mousex = e.pageX - 90; //Get X coordinates
                var mousey = e.pageY - 70; //Get Y coordinates
                $('.tooltip').css({ top: mousey, left: mousex }) // position to display tooltip
            });
    });
</script>

<script src='//www.youtube.com/iframe_api'></script>
<script type="text/javascript">    // Function
    var player; playerSize = 'width: 640px; height: 390px;'; widthPX = '640'; heightPX = '390';
    function onYouTubeIframeAPIReady() {     }
    function onPlayerReady(event) { event.target.playVideo(); } // When player is ready, then play the video
   
    function createIframePlayer( videoID, seconds){ // two parameters: videoID = youtube video id, time =
        setAllToInitialState();
        imgID = '#'+videoID; // syntax of finding elements with given ID --- $(#id)
        frameID = 'frameID='+videoID; // get frameID           
        divTag = '<div id="'+frameID+'"></div>'; // create a div tag with id for iframe player
        $(imgID).parent().attr('style',playerSize+' display: none;'); // set attribute (Hide image) > style={display: none}
        $(imgID).parent().after( divTag ); // insert div tag at the end of parent scope
       
        if(seconds == 0){ player = new YT.Player( frameID, {height: heightPX,width: widthPX,videoId: videoID,events: {'onReady': onPlayerReady}}); } // image is clicked
        else { player = new YT.Player( frameID, {height: heightPX,width: widthPX,videoId: videoID,playerVars: { 'enablejsapi': 1,'autoplay': 1,'start': seconds }});} // time is clicked
    }
    function createPlayer( VideoPlayer, videoID, seconds){
        setAllToInitialState();
        frameID = "frameID="+videoID;
        divTag = "<div id='"+frameID+"'></div>";
        VideoPlayer.parent().parent().before( divTag );
        player = new YT.Player( frameID, {height: heightPX,width: widthPX,videoId: videoID,playerVars: { "enablejsapi&": 1,"autoplay": 1,"start": seconds }});
    }
    function setAllToInitialState(){
        player = false; // No Player
        $("iframe[title='YouTube video player']").remove(); // Remove the video of iframe tag specified by title 'Youtube video player'
        $("div[class='imgPanel'][style='"+playerSize+" display: none;']").attr('style',playerSize); // ( Find the non-display image panel, set it to be visible): the div tag which class is 'imgPanel' and style is playerSize with 'display: none;', is changed its style to be playerSize
    }
    function Time2Second(time){ // Convert 0h00m00s (time) to seconds number (Work for all cases: default is 0)
        var i=0, num = "", hour = 0, minute = 0, second = 0, seconds = 0;
        while(time[i]){
            switch(time[i]){
                default : num += time[i]; break;
                case "h": hour = num; num = ""; break;
                case "m": minute = num; num = ""; break;
                case "s": second = num; num = ""; break;    
            }i++;
        }
    return seconds = hour*60*60 + minute*60 + second*1;
    }
    function TextOfSubject( element ){ // get Text of Subject
        time = element.siblings('a[href="#"]').text(); // get Time of the <a> tag
        text = "# " + element.parent().text(); // get text of the Subject
            StringLength = element.parent().text().length;
            if(StringLength == 8){ text = "# " + element.parents('tr').text();    }
        yt_ID = element.closest('img.imgPanel').attr('id'); // get Youtube Video ID from the id of image tag
        yt_url = "> http://youtu.be/" + getYoutubeID( onclick_text ) + "?t=" + time; // get Youtube URL with time
        blog_url = "> " + document.URL; // get Blog URL
        result = text + "\n\n" + yt_url + "\n" + blog_url; // Show 3 parts: subject, Youtube URL, Blog URL
    return result;
    }
    function addSpaceText( str ){ return result = str.substr(0, 7) + "   " + str.substr(8, str.length); }
    function getSubjectText( string ){ // remove unknown space text ( because Table tag)
        result='';i=0;
        while(i<string.length-3){ // -3 use for the last index of string
            if( (i>=4 && i<=11) || (i>=17) ){ result += string[i];}i++; // unknown is b/w 0-3, 10-16, text is 4-11, 17+
        }
    return result;
    }
    function getYoutubeID( text ){
        youtube_ID = ""; i=22; // index of the start of Youtube ID ( the end is ' )
        while(text){ if( text[i] != "'" ){ youtube_ID += text[i]; i++;} else { break; } }
    return youtube_ID;
    }
    function getVideoId( videoID ){ return videoID;    }
    function getSeconds( time ){ return seconds = Time2Second(time); }
</script>

<a href="//sfrom.net/#url=youtu.be/0w7LxPh5ppQ" rel="nofollow" target="_blank"><img class="Download" src="//goo.gl/CceJrA" /></a><br />
<div class="imgPanel">
    <img id="0w7LxPh5ppQ" src="//img.youtube.com/vi/0w7LxPh5ppQ/0.jpg" class="imgStyle imgCursor"></img>
    <div class="imgButton"></div>
</div>
<hr>
<div class="row"><div class="column colTime"><a href="#" id="YVP" onclick="videoID = getVideoId('0w7LxPh5ppQ'); seconds = getSeconds('0h00m44s'); return false">0h00m44s</a><img id="Subject" class="imgSubject" src="//goo.gl/CceJrA" /></div><div class="column colSubject">TEXT SAMPLE</div></div>