Return Home
Playing a Segmented Video: HTML 5 + JavaScript
HTML5 / JavaScript Player
<!doctype html >
<html>
<script src="../../../js/jquery-1.5.js"></script>
<script type="text/javascript">
var prefix = "body_disease_pharmacokinetics01" ; // The prefix of the xml config file before _config.xml
var title = "Pharmacokinetics 01" ;
var n = 0 ;
var nodes_length = 0 ;
//initialise passing variables
var currentTime = 0;
var currentVidNo = 0;
var currentPicNo = 0;
var PicMode = 0; //default in picture mode
var body_message = "";
var totDuration = 0;
var OffsetTime = 0;
var TrackTime = new Array();
function init() {
document.getElementById("title").innerHTML=title ;
if ( window.XMLHttpRequest ) {
xmlhttp = new XMLHttpRequest() ;
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}
document.title = title;
xmlhttp.open("GET", prefix + "_config.xml", false) ;
xmlhttp.send() ;
xmlDoc = xmlhttp.responseXML ;
nodes = xmlDoc.getElementsByTagName("node") ;
if ( nodes ) {
//to store time duration respectively (get duration only for video1)
var x = xmlDoc.getElementsByTagName("video1");
if (x) {
var y,z;
var count=0;
for ( i = 0 ; i < x.length ; i++ ) {
y = x[i].getElementsByTagName("duration");
if(y.length)
{
z = y[0].childNodes[0].nodeValue;
var duration = parseFloat(z);
TrackTime[count] = duration;
totDuration = TrackTime[count]+totDuration;
count++;
}
}
}
totDuration = formatTime(totDuration);
UpdateProgressTime();
//create table
var tab = document.createElement("table");
var toc = document.getElementById("toc") ;
nodes_length = nodes.length;
for ( i = 0 ; i < nodes_length ; i++ ) {
var row = document.createElement("tr");
var cell1 = document.createElement("td");
var cell2 = document.createElement("td");
toc.appendChild(tab,null);
tab.appendChild(row,null);
tab.appendChild(cell1,null);
var a =document.createElement("a") ;
a.innerHTML = nodes[i].getAttribute("label");
a.style.textDecoration = "none" ;
a.href = "javascript:play_videoxml(PicMode,"+nodes[i].getAttribute("fileset")+",0,false)" ; //autoplayback is false
a.id = "a" + nodes[i].getAttribute("fileset") ;
tab.appendChild(a,null);
cell2.innerHTML = formatTime(TrackTime[i]);
tab.appendChild(cell2,null);
cell2.style.color = "blue";
}
//play from respective pic/vid base on url passing variable
getURL();
//check if jpg exist, if not, disable mode selection and set to video mode
var dir = window.location.href.slice(0,window.location.href.lastIndexOf('/')+1);
var pic = dir+"images_\/"+prefix + "-" + currentPicNo + ".jpg"; //purposely change folder to images_ to disable mode selection
var err = isFile(pic);
if(err == false)
{
PicMode = 0;
document.getElementById("picURL").style.visibility = 'hidden';
$("#mode").hide();
}
//initialise both vid and pic mode values
if(PicMode == 1)
{
play_videoxml(0,currentVidNo,currentTime,false) ;
play_videoxml(1,currentPicNo,currentTime,false) ;
}
else
{
play_videoxml(1,currentPicNo,currentTime,false) ;
play_videoxml(0,currentVidNo,currentTime,true) ;
}
//initialise to pause state in picture mode
if(PicMode == 1)
document.getElementById("vid").pause() ;
else
document.getElementById("vid").play() ;
}
}
function isFile(url){
try{
var O= new XMLHttpRequest();
O.open('HEAD', url, false);
O.send(null);
return O.status== 200;
}
catch(er){
return null;
}
}
function play_videoxml(PicMode,v,time,autoplayback) {
//alert("playxml PicMode="+PicMode+"VidNo="+v+" autoplayback="+autoplayback);
currentTime = time;
var vid = document.getElementById("vid") ;
var pip1 = document.getElementById("pip1") ;
var vidV = document.getElementById("VideoView");
var picV = document.getElementById("PictureView");
var curDir = window.location.href.slice(0,window.location.href.lastIndexOf('/')+1);
var a = document.getElementById("a"+v) ;
a.style.color = "orange" ;
hasPip = xmlDoc.getElementsByTagName("hasPipVideo")[v] ;
if ( hasPip.childNodes[0].nodeType == 3 && hasPip.childNodes[0].nodeValue == 1 ) { // Boolean
pip1.style.display = "inline" ;
pip.src = prefix + "-" + v + "_PIP.mp4" ;
} else {
pip1.style.display = "none" ;
}
if(PicMode == 1)
{
if(!autoplayback) // only update currentPicNo when not autoplayback (when video is auto-playing)
currentPicNo = v;
picV.src = curDir+"images\/"+prefix + "-" + currentPicNo + ".jpg";
//var err = isFile(picV.src);
//alert(err+picV.src);
document.images["note"].src = picV.src;
picV.style.display = 'block';
vidV.style.display = 'none';
}
else
{
currentVidNo = v;
vid.src = prefix + "-" + v + ".mp4" ;
vidV.style.display = 'block';
picV.style.display = 'none';
document.getElementById("vid").play() ;
}
// need to update offsetTime and currentVideo when in video mode or when changed to picture mode but video is playing
if(PicMode == 0 || autoplayback == true)
{
OffsetTime = 0; //reset
for ( i = 0 ; i < v ; i++ )
{
//to add up tracks time
OffsetTime += TrackTime[i];
}
currentVidNo = v;
vid.src = prefix + "-" + v + ".mp4" ;
n = ++v;
}
vid.addEventListener('loadedmetadata', function () {
//to prevent time value passed in more than actual duration
if(time > vid.duration)
time = 0;
vid.currentTime = time;
}, true);
vid.addEventListener('timeupdate', function() { //to get currentTime
currentTime = document.getElementById("vid").currentTime;
UpdateProgressTime();
}, false);
if ( n >= nodes_length )
vid.removeAttribute("onended",0);
}
function getURL()
{
var vars = [], hash, splithash, slicehash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
if(hashes.length == 1) //no passing variables
{
//skip
}
else{
for(var i = 0; i < hashes.length; i++)
{
hash = hashes[i].split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
// 1st var=mode, 2nd var=video/pic no, 3rd var=time, 4th var=autoplayback(no need for getURL)
switch(i)
{
case 0: PicMode = hash[1]; break;
case 1:
n = hash[1];
//with 2nd variable exist, we will init both vid and pic to same no
currentPicNo = currentVidNo = n;
break;
case 2: currentTime = hash[1]; break;
case 3:
//autoplayback = hash[1];
break;
default : break;
}
}
}
return vars;
}
function changetext()
{
var hashes = window.location.href.slice(0,window.location.href.indexOf('html') + 4);
if(PicMode == 1)
body_message = hashes+"?Mode="+PicMode+"\&No="+currentPicNo+"\&Time="+0;
else
body_message = hashes+"?Mode="+PicMode+"\&No="+currentVidNo+"\&Time="+currentTime;
var text = body_message;
$("#test").val(text);
}
function SwitchMode(mode)
{
var vidV = document.getElementById("VideoView");
var picV = document.getElementById("PictureView");
var curDir = window.location.href.slice(0,window.location.href.lastIndexOf('/')+1);
PicMode = mode;
if(PicMode == 1)
{
picV.src = curDir+"images\/"+prefix + "-" + currentPicNo + ".jpg";
document.images["note"].src = picV.src;
picV.style.display = 'block';
vidV.style.display = 'none';
}
else
{
vidV.style.display = 'block';
picV.style.display = 'none';
var vid = document.getElementById("vid") ;
if (document.getElementById('vid').paused)
vid.play();
}
}
function RespectiveNote()
{
var vidV = document.getElementById("VideoView");
var picV = document.getElementById("PictureView");
var curDir = window.location.href.slice(0,window.location.href.lastIndexOf('/')+1);
currentPicNo = currentVidNo;
document.images["note"].src = curDir+"images\/"+prefix + "-" + currentPicNo + ".jpg";
//alert("CurrentPicNo="+currentPicNo+" Pic.src="+pic.src);
picV.style.display = 'block';
vidV.style.display = 'none';
if(PicMode == 0)
SwitchMode(1);
}
function formatTime(seconds) {
seconds = Math.round(seconds);
minutes = Math.floor(seconds / 60);
minutes = (minutes >= 10) ? minutes : "0" + minutes;
seconds = Math.floor(seconds % 60);
seconds = (seconds >= 10) ? seconds : "0" + seconds;
return minutes + ":" + seconds;
}
function UpdateProgressTime()
{
var Time = formatTime(OffsetTime+currentTime);
document.getElementById("duration").innerHTML=Time+"/"+totDuration;
}
</script>
<style type="text/css">
a
{
text-decoration: none;
}
body, td
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
vertical-align: top;
}
td#contents
{
/* width: 20%;*/
}
ul
{
list-style-type: none;
}
div#buttons
{
/* button styles */
background-color: #4682B4;
-webkit-border-radius: 10px 9px; -moz-border-radius: 10px 9px; border-radius: 10px 9px;
border: 0px;
margin: 5px;
padding-top: 10px;
padding-bottom: 10px;
width: 800px;
/*text styles */
color: white;
font-family: helvetica, arial, sans-serif;
font-size: 11px;
font-weight: bold;
letter-spacing: 0px;
word-spacing: 0px;
text-align: center;
text-shadow: 0px 0px 0px black;
/*interaction */
cursor: pointer;
}
div#disclaimer
{
font-size: 100%;
}
div#title
{
text-align: center;
font-size: 150%;
font-weight: bold;
margin-left: auto;
margin-left: auto;
}
video#vid
{
padding-left: 4px;
height: 600px;
width: 800px;
}
div#showtime
{
/* button styles */
background-color: #4682B4;
-webkit-border-radius: 10px 9px; -moz-border-radius: 10px 9px; border-radius: 10px 9px;
border: 0px;
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:650px;
padding-top: 0px;
padding-bottom: 0px;
width: 150px;
align:right;
/*text styles */
color: white;
font-family: helvetica, arial, sans-serif;
font-size: 8px;
font-weight: bold;
letter-spacing: 0px;
word-spacing: 0px;
text-align: center;
text-shadow: 0px 0px 0px black;
}
div#menu_header
{
text-align: center;
color:#009;
}
</style>
<title>Pharmacokinetics 01</title><body onload='init()'>
<div id="title"></div>
<table>
<tr>
<td id="contents">
<div id="menu_header">Video Playlist</div>
<div id="toc"></td>
</td>
<td valign="top">
<!--p id="mode" style="text-align:right;"><a href="#" onClick="SwitchMode(1);">Picture Mode</a> |
<a href="#" onClick="SwitchMode(0);">Video Mode</a></p-->
<div id="showtime" align="right">
<h1 align="center" id="duration" algin="right">000:00/000:00</h1>
</div>
<div id='PictureView'>
<img name="note" src="./images/BD_review_antibiotic_therapy-0.jpg" width="800" height="600" />
</div>
<div id="VideoView">
<div id="pip1" style="display:none;">
<video id='pip' controls="controls" autoplay="autoplay"></video>
<br>
</div>
<video id='vid' controls="controls" preload="metadata" autoplay="autoplay" onended='play_videoxml(PicMode,n,0,true);'></video>
</div>
<div id='buttons'>
<div id='disclaimer'>
Playback speeds have been confirmed to work only in:
<strong><ul><li>Safari 5.0 on Macs</li>
<li>Google Chrome 9.0 on Windows and Linux</li></strong>
</ul> Other browsers may not apply the playback speed when changing slides.<br />
Code for playback speeds has been graciously provided by Anh Tranh of the Duke-NUS Class of 2014.
</div>
<input type="button" onClick="changetext();" value="Get URL" />
<input id="test" type="text" readonly="readonly" size=110 value="Please click Get URL to display URL here."/>
<button onClick="document.getElementById('vid').play()">Play</button>
<button onClick="document.getElementById('vid').pause()">Pause</button>
<button onClick="document.getElementById('vid').defaultPlaybackRate=1;document.getElementById('vid').playbackRate=1">Normal Speed</button>
<button onClick="document.getElementById('vid').defaultPlaybackRate=1.5;document.getElementById('vid').playbackRate=1.5">Speed x 1.5</button>
<button onClick="document.getElementById('vid').playbackRate+=0.1;document.getElementById('vid').defaultPlaybackRate+=0.1">Increase Speed</button>
<button onClick="document.getElementById('vid').playbackRate-=0.1;document.getElementById('vid').defaultPlaybackRate-=0.1">Reduce Speed</button>
<button onClick=
"document.getElementById('vid').playbackRate-=0.1;document.getElementById('vid').defaultPlaybackRate-=0.1">Reduce Speed</button>
<!--button id="picURL" onClick="RespectiveNote();">Go to Video's Respective Picture</button-->
</div>
</td>
</tr>
</table>
</body>
</html>