How can I cut the the black area on top and bottom of the HTML5 video? I tried changing the size from the codes but it stretched the whole video, I dont want the stretch, I just want to cut those areas
<video autobuffer controls autoplay>
<source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>
The problem is that the video is a certain size and its keeping its ratio (as it should) which isn't matching the size you want. It's similar to watching films on your tv, where the black lines also exist.
Also, the attribute autobuffer has been obsolete for years and you shouldn't be using it, use the preload attribute instead, e.g. preload="meta"
Perhaps easiest is to "clip" the video element using a container div:
Create a container div sized to the non-black size of the video.
Make it position:relative
Make it overflow:hidden
Add a child video element to the container div.
Make it position:absolute.
Set the video element's top: and left: attributes so the black sidebars are effectively clipped away
An alternative using html Canvas
If you are sufficiently annoyed by the black sidebars caused by aspect-ratio differences, you can draw each frame of your video on an html5 canvas and clip the canvas to only show the non-sidebar area. Here's a useful link: http://html5doctor.com/video-canvas-magic/
This is possible because a video element can be used as an image source for canvas.
// get a reference to the video element
var videoElement=document.getElementById('#myVideo');
// draw the current frame of the video element onto canvas
context.drawImage(videoElement,0,0);
The .drawImage method has an overload that lets you clip a portion of the source and draw that clipped portion on the canvas. The clipping version of .drawImage looks like this:
context.drawImage(
sourceImage,
sourceX, sourceY, sourceWidthToClip, sourceHeightToClip,
canvasX, canvasY, scaledWidth, scaledHeight );
An annotated explanation of the clipping version of .drawImage is available on this previous Stackoverflow post:
HTML / Java Script Canvas - how to draw an image between source and destination points?
Using an html canvas will work, but it requires more coding. You might consider html canvas if you need to add text annotations to your video or if you need to display a non-rectangular portion of your video.
