Skip to content

Instantly share code, notes, and snippets.

@danieltroger

danieltroger/vmux.html

Created March 23, 2015 14:09
Show Gist options
  • Save danieltroger/c81167e42b9f8caad502 to your computer and use it in GitHub Desktop.
Save danieltroger/c81167e42b9f8caad502 to your computer and use it in GitHub Desktop.
Download ZIP
Video multiplexer
Raw
vmux.html
<!DOCTYPE html>
<html>
<body>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<video autoplay style="display: none;">
<source src="//download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_h264.mov" type="video/mp4">
<source src="//download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_stereo.ogg" type="video/ogg">
<!-- <source src="big_buck_bunny_480p_h264.mov" type="video/mp4">
<source src="big_buck_bunny_480p_stereo.ogg" type="video/ogg">-->
Your browser does not support HTML5 video.
</video>
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
<style>
#c1
{
align: left;
width: 50%;
position: absolute;
left: 0px;
top: 0px;
}
#c2
{
align: right;
width: 50%;
position: absolute;
right: 0px;
top: 0px;
}
</style>
<script>
/*!
* jQuery UI Touch Punch 0.2.3
*
* Copyright 2011–2014, Dave Furfero
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* Depends:
* jquery.ui.widget.js
* jquery.ui.mouse.js
*/
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
var v = document.querySelector("video"),
c1 = document.querySelector("#c1"),
c2 = document.querySelector("#c2"),
ctx1 = c1.getContext('2d'),
ctx2 = c2.getContext('2d'),
vh = 0,
vw = 0;
v.play();
v.addEventListener("loadedmetadata",function (){
vw = v.videoWidth;
vh = v.videoHeight;
//c1.style.width = vw+"px";
//c1.style.height = vh+"px";
c1.width = vw;
c1.height = vh;
$(c1).resizable();
//c2.style.width = vw+"px";
//c2.style.height = vh+"px";
c2.width = vw;
c2.height = vh;
$(c2).resizable();
$("div").draggable();
});
v.addEventListener('play', draw1);
v.addEventListener('play', draw2);
function draw1()
{
requestAnimationFrame(draw1);
if(!v.paused && !v.ended)
{
var cw1 = parseInt(c1.style.width),
ch1 = parseInt(c1.style.height);
c1.width = cw1;
c1.height = ch1;
//ctx.clearRect(0,0,cw,ch);
ctx1.drawImage(v,0,0,cw1,ch1);
}
}
function draw2()
{
requestAnimationFrame(draw2);
if(!v.paused && !v.ended)
{
var cw2 = parseInt(c2.style.width),
ch2 = parseInt(c2.style.height);
c2.width = cw2;
c2.height = ch2;
//ctx.clearRect(0,0,cw,ch);
ctx2.drawImage(v,0,0,cw2,ch2);
}
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment