To overcome this issue, consider utilizing a canvas element. While it may involve more code, this method provides greater flexibility and control.
You can style the Canvas element with CSS:
#canvas {
background:#000;
border-radius:20px 0 0 20px; /* applying styles */
}
Next, manually create and load the video (alternatively, you can load the video using HTML and hide the original video element):
var video = document.createElement('video'),
url;
/// configuring video instance
video.preload = 'auto';
video.addEventListener('canplaythrough', start, false);
/// determining compatible video format and providing online link
if (video.canPlayType('video/ogg').length > 0 ) {
url = 'http://www.w3schools.com/html/movie.ogg';
} else {
url = 'http://www.w3schools.com/html/movie.mp4';
}
/// initiating video loading process
video.src = url;
/// starting the loop
function start(e) {
/// obtaining canvas and context
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
w = canvas.width,
h = canvas.height,
toggle = false;
/// playing video and looping through frames
video.play();
loop();
function loop() {
/// reducing FPS to improve performance
toggle = !toggle;
if (toggle === false) {
requestAnimationFrame(loop);
return;
}
/// drawing video frame onto canvas
ctx.drawImage(video, 0, 0, w, h);
requestAnimationFrame(loop);
}
}
This is a basic example and it's essential to properly handle the canPlayType results for various formats like webm as well. Keep in mind that this method may not be compatible with Safari browsers due to their lack of support for drawImage with video elements as source.