Specific Time using iframe (multi-video)
========================================================================
NOTE: Not good!!! when there are many videos loaded at the same time
Good for multi-video : Click image to play video with specific time (multi-video)
Code on a post:
<script type="text/javascript">
// <script src='https://www.youtube.com/iframe_api'></script> --- Load the IFrame Player API code asynchronously ( on template <head>)
// var ListPlayer = new Array(); --- a list of iframe youtube players (Set as global variable on template (<head>)
// playerSeekTo function and Time2Seconds function are on template (<head>)
function onYouTubeIframeAPIReady() { // Loaded automatically
var i=0; var yt = document.getElementsByName('ytplayer');
while(yt[i]){ ListPlayer.push( new YT.Player(yt[i].id) ); i++;}
}
</script>
<!-- Sample: VideoID1 = 0w7LxPh5ppQ, VideoID2 = Vem3RMhSHbk -->
<iframe name="ytplayer" id="VideoID1" src="//www.youtube.com/embed/VideoID1?enablejsapi=1" width="640" height="390"></iframe><br />
<a href="#" onclick="playerSeekTo('VideoID1', '0h03m33s'); return false;">0h03m33s</a><br />
========================================================================
Test @ http://www.w3schools.com/html/tryit.asp?filename=tryhtml_headers
Sample Code:
<script type="text/javascript">
// Load the IFrame Player API code asynchronously. OR insert <script src='https://www.youtube.com/iframe_api'></script>
var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var ListPlayer = new Array(); // a list of all players
function onYouTubeIframeAPIReady() { // Loaded automatically for all iframe video(s) on window ( Note: this function is loaded only one time in each window )
//ListPlayer = [ new YT.Player('VideoID1'), new YT.Player('VideoID2')];
//ListPlayer.push( new YT.Player('VideoID1'), new YT.Player('VideoID2'));
var i=0; var yt = document.getElementsByName('ytplayer');
while(yt[i]){ ListPlayer.push( new YT.Player(yt[i].id) ); i++;}
}
//generic seekTo function taking a player id and time (0h00m00s) as parameters
function playerSeekTo(playerID, time){
var seconds = Time2Second(time), i=0;
while(ListPlayer[i]){
if(ListPlayer[i].getIframe().id == playerID){
ListPlayer[i].seekTo(seconds);break;
}i++;
}
}
// Convert 0h00m00s (time) to seconds number (Work for all cases: default is 0)
function Time2Second(time){
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;
}
</script>
TITLE<br />
<!-- Sample: VideoID1 = 0w7LxPh5ppQ, VideoID2 = Vem3RMhSHbk -->
<iframe name="ytplayer" id="VideoID1" src="//www.youtube.com/embed/VideoID1?enablejsapi=1" width="640" height="390"></iframe><br />
<a href="#" onclick="playerSeekTo('VideoID1', '0h03m33s'); return false;">0h03m33s</a><br />
<iframe name="ytplayer" id="VideoID2" src="//www.youtube.com/embed/VideoID2?enablejsapi=1" width="640" height="390"></iframe><br />
<a href="#" onclick="playerSeekTo('VideoID2', '0h03m33s'); return false;">0h04m44s</a><br />
========================================================================
No comments:
Post a Comment