Geek Answers Handbook

HTML5 video frame radius not working

I am trying to make my HTML5 video with left and lower left rounded corners transparent, just like it would when using the border radius. Unfortunately, in Chrome, the border radius does not work for some reason in the HTML HTML tag, but in IE10 and Firefox.

After several attempts to achieve this, I stumbled upon this answer: https://stackoverflow.com/a/166268/212616916.jpg But I quickly found that it fills the color in rounded corners, instead of making it transparent.

How can I make the border radius work with HTML5 video in Google Chrome without affecting video performance?

I want to use javascript / jQuery if necessary.

+4
source share
3 answers

To quote another post :

There are some outstanding errors in WebKit that allow you to crop the content according to the boundary radius, like this one or is it specifically about the video element .

If you apply a border radius to an element that wraps around the video and adds -webkit-mask-image, then this can be done in Chrome. Here is a demo that masks transparent png and clamps the corners of a video:

Demo (transparent background): http://jsfiddle.net/pe3QS/24/

Update . I changed HTML / CSS to use only one wrapper element and it works (at least) with IE9 +, FF and Chrome.

CSS

div.outer {
    float: left;
    height: 240px;
}
div.outer video {
    width: 320px;
    height: 100%;
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
    border-radius: 32px 0 32px 0;
}

HTML

<div class="outer">
    <video src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
+5

, . , .

CSS Canvas:

#canvas {
    background:#000;
    border-radius:20px 0 0 20px; /* top left and bottom left as in OP */
}

( HTML ):

var video = document.createElement('video'),
    url;

/// setup video instance    
video.preload = 'auto';
video.addEventListener('canplaythrough', start, false);

/// check what we can play and borrow some online video 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';
}

/// start loading video
video.src = url;

/// start the loop
function start(e) {

    /// get canvas and context
    var canvas = document.getElementById('canvas'),
        ctx = canvas.getContext('2d'),
        w = canvas.width,
        h = canvas.height,
        toggle = false;

    /// start video and loop
    video.play();
    loop();

    function loop() {

        /// we won't need 60 FPS so reduce to 30 FPS
        toggle = !toggle;
        if (toggle === false) {
            requestAnimationFrame(loop);
            return;
        }

        /// draw video frame onto canvas
        ctx.drawImage(video, 0, 0, w, h);
        requestAnimationFrame(loop);
    }
}

, , : canPlayType ( "", no , ) , (.. webm).

: Safari, ( ) Canvas. drawImage .

+5

, :

border-radius: 22px; overflow: hidden; -webkit-transform: translateZ(0); box-shadow: 0 19px 51px 0 rgba(0,0,0,0.16), 0 14px 19px 0 rgba(0,0,0,0.07);

- -webkit-transform: translateZ(0). , , , .

Safari 11, Chrome 65, Firefox 59, Edge Win 10 IE 11

0

More articles:


All Articles