Skip to content

Commit

Permalink
demo page: add a new time range container that allows to set the wind…
Browse files Browse the repository at this point in the history 
…ow by dragging the mouse
  • Loading branch information
@mangui
mangui committed Mar 20, 2015
1 parent 49c2b72 commit a0674ba
Show file tree
Hide file tree
Showing 2 changed files with 100 additions and 3 deletions.
45 changes: 44 additions & 1 deletion demo/canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
var buffer = events[i].buffer;
maxBuffer = Math.max(maxBuffer, buffer);
}
maxBuffer+=10;

y_offset += 15;
legend = 'playable after:' + events[0].time + ' ms';
Expand Down Expand Up @@ -109,7 +110,49 @@
ctx.lineTo(x_offset,y_offset);
}
}
ctx.stroke();
ctx.lineTo(x_offset, canvas.height);
ctx.fill();
}

function canvasTimeRangeUpdate(canvas, minTime, maxTime, windowMinTime, windowMaxTime, events) {
var ctx = canvas.getContext('2d'),
bufferChartStart = 0,
bufferChartWidth = ctx.canvas.width;
x_offset = 0,y_offset = 0;
ctx.clearRect (0,0,canvas.width, canvas.height);

if(events.length === 0) {
return;
}

var maxBuffer = 0;
for (var i =0 ; i < events.length; i++) {
var buffer = events[i].buffer;
maxBuffer = Math.max(maxBuffer, buffer);
}
maxBuffer+=10;

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.moveTo(bufferChartStart, ctx.canvas.height);
for (var i =0 ; i < events.length; i++) {
x_offset = bufferChartStart + (bufferChartWidth*(events[i].time-minTime))/(maxTime-minTime);
y_offset = ctx.canvas.height*(1 - events[i].buffer/maxBuffer);
ctx.lineTo(x_offset,y_offset);
}
ctx.lineTo(x_offset, canvas.height);
ctx.fill();

ctx.globalAlpha = 0.5;
ctx.fillStyle = "grey";
var x_start = bufferChartStart;
var x_w = bufferChartWidth*(windowMinTime-minTime)/(maxTime-minTime);
ctx.fillRect(x_start,0,x_w, canvas.height);


var x_start = bufferChartStart+bufferChartWidth*(windowMaxTime-minTime)/(maxTime-minTime); ;
var x_w = bufferChartWidth-x_start;
ctx.fillRect(x_start,0,x_w, canvas.height);
}

function canvasLoadDrawEvent(ctx,yoffset,event,minTime,maxTime) {
Expand Down
58 changes: 56 additions & 2 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ <h1 class="title">hls.js demo page</h1>
<input type="text" id='windowStart' defaultValue="0" onkeydown="if(window.event.keyCode=='13'){windowStart=document.getElementById('windowStart').value;}">
<button onclick="windowEnd=document.getElementById('windowEnd').value">fixed window end(ms)</button>
<input type="text" id='windowEnd' defaultValue="10000" onkeydown="if(window.event.keyCode=='13'){windowEnd=document.getElementById('windowEnd').value;}">
<canvas id="timerange_c" width="640" height="60" style="border:1px solid #000000" onmousedown="timeRangeCanvasonMouseDown(event)" onmousemove="timeRangeCanvasonMouseMove(event)" onmouseup="timeRangeCanvasonMouseUp(event)" onmouseout="timeRangeCanvasonMouseOut(event)";></canvas>
<canvas id="buffertime_c" width="640" height="100" style="border:1px solid #000000";></canvas>
<canvas id="event_c" width="640" height="15" style="border:1px solid #000000";></canvas><br>
</div>
Expand Down Expand Up @@ -157,6 +158,7 @@ <h3> Test Videos </h3>
events = { load : [], buffer : []};
document.getElementById('event_c').width = window.innerWidth-30;
document.getElementById('buffertime_c').width = window.innerWidth-30;
document.getElementById('timerange_c').width = window.innerWidth-30;
hls.t0 = Date.now();
hls.attachSource(_url);
});
Expand Down Expand Up @@ -295,27 +297,79 @@ <h3> Test Videos </h3>
document.getElementById('buffered_log').style.display="block";
document.getElementById('buffered_c').style.display="block";
document.getElementById('buffertime_c').style.display="block";
document.getElementById('timerange_c').style.display="block";
document.getElementById('event_c').style.display="block";
}

function hideCanvas() {
document.getElementById('buffered_log').style.display="none";
document.getElementById('buffered_c').style.display="none";
document.getElementById('buffertime_c').style.display="none";
document.getElementById('timerange_c').style.display="none";
document.getElementById('event_c').style.display="none";
}



var timeRangeMouseDown=false;
function timeRangeCanvasonMouseDown(evt) {
var canvas = document.getElementById('timerange_c'),
bRect = canvas.getBoundingClientRect(),
mouseX = Math.round((evt.clientX - bRect.left)*(canvas.width/bRect.width));
windowStart = Math.round(mouseX * getWindowTimeRange().now / canvas.width);
windowEnd = windowStart+500;
timeRangeMouseDown = true;
windowSliding = false;
//console.log('windowStart/windowEnd:' + '/' + windowStart + '/' + windowEnd);
document.getElementById('windowStart').value=windowStart;
document.getElementById('windowEnd').value=windowEnd;
}

function timeRangeCanvasonMouseMove(evt) {
if(timeRangeMouseDown) {
var canvas = document.getElementById('timerange_c'),
bRect = canvas.getBoundingClientRect(),
mouseX = Math.round((evt.clientX - bRect.left)*(canvas.width/bRect.width)),
pos = Math.round(mouseX * getWindowTimeRange().now / canvas.width);

console.log('pos/windowStart:' + '/' + pos + '/' + windowStart);
if(pos < windowStart) {
windowStart = pos;
} else {
windowEnd = pos;
}
if(windowStart === windowEnd) {
// to avoid division by zero ...
windowEnd +=50;
}
//console.log('windowStart/windowEnd:' + '/' + windowStart + '/' + windowEnd);
document.getElementById('windowStart').value=windowStart;
document.getElementById('windowEnd').value=windowEnd;
}
}

function timeRangeCanvasonMouseUp(evt) {
console.log(timeRangeCanvasonMouseUp);
timeRangeMouseDown = false;
}

function timeRangeCanvasonMouseOut(evt) {
console.log(timeRangeCanvasonMouseOut);
timeRangeMouseDown = false;
}

var windowDuration=20000,windowSliding=true,windowStart=0,windowEnd=10000;
document.getElementById('windowStart').value=windowStart;document.getElementById('windowEnd').value=windowEnd;
function refreshCanvas() {
var windowTime = getWindowTimeRange();
canvasLoadUpdate(document.getElementById('event_c'), windowTime.min,windowTime.max, events.load);
canvasBufferUpdate(document.getElementById('buffertime_c'), windowTime.min,windowTime.max, events.buffer);
canvasTimeRangeUpdate(document.getElementById('timerange_c'), 0, windowTime.now, windowTime.min,windowTime.max, events.buffer);
}

function getWindowTimeRange() {
var tnow = new Date() - hls.t0,minTime,maxTime;
if(windowSliding) {
var tnow = new Date() - hls.t0,minTime,maxTime;
// let's show the last 60s from current time
if(windowDuration) {
minTime = Math.max(0, tnow-windowDuration),
Expand All @@ -328,7 +382,7 @@ <h3> Test Videos </h3>
minTime = windowStart;
maxTime = windowEnd;
}
return { min : minTime, max: maxTime}
return { min : minTime, max: maxTime, now : tnow}
}

function minsecs(ts) {
Expand Down

0 comments on commit a0674ba

Please sign in to comment.