Crop in JW Player possible?
Is it possible to crop an section of video within JWP and then display only that section. For example we may send out live or VOD video as 1280 x 720. We want to crop out only the upper right quadrant of video and then display only that section. Any one have any thoughts. Here is how it might be done in HTML 5. We need a solution that would work on all players.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html5 : how to crop a video tag into a canvas tag</title>
<script type="text/javascript">
function onLoadEvent() {
function loop(){
var video = document.getElementById('video');
ctx.drawImage(video, 320, 0, 320, 180, 0, 0, 640, 360);
setTimeout(loop, 1000 / 30);
}
var canvas = document.getElementById('cropCvs');
var ctx = canvas.getContext('2d');
loop();
}
</script>
</head>
<body onload="javascript:onLoadEvent()">
<video
id="video"
height="360"
width="640"
autoplay
controls
src="http://cdn.xxxx.org/apis/html5lib/player-examples/media/bbb_trailer_360p.webm?a"
style="width: 640px; height: 360px; border: 1px solid black;">
</video>
<canvas
id="cropCvs"
height="360"
width="640"
style="width: 320px; height: 180px; border: 1px solid black;">
</canvas>
</body>
</html>
Details:
context . drawImage(image, dx, dy)
context . drawImage(image, dx, dy, dw, dh)
context . drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
details src : http://www.xxxxx.org/specs/web-apps/current-work/multipage/the-canvas-element.html
in this example : ctx.drawImage(video, 320, 0, 320, 180, 0, 0, 640, 360);
video : video source tag
320,0 : the shift coords
320,180 : the canvas size
0,0 : no shift in the canvas
640,360 : important ! it’s the native resolution of video source
setTimeout(loop, 1000 / 30); // 30 is the fps
important ! the video and canvas width and height properties must be set to the native resolution (for video) and desired resolution (for canvas)
