Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

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">
<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');
<body onload="javascript:onLoadEvent()">
style="width: 640px; height: 360px; border: 1px solid black;">
style="width: 320px; height: 180px; border: 1px solid black;">

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 :
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)

1 Community Answers


JW Player Support Agent  
0 rated :

It might be possible to do what you are trying to do, but we do not have any built-in functionality for this.

This question has received the maximum number of answers.