I've found a really awesome slider on a website (https://antoni.de)
The slider has videos set as backgrounds and the transition effect makes the video break into pieces (bars, varying in width, depending on the scrollpos)
How could I achieve a relatively close version of this?
Here's my current code:
HTML + jQuery:
<div id="slider">
<canvas id="c" width='1920px' height='1080px'></canvas>
<video id="v" preload="auto" autoplay="" loop="" muted="">
<source src="common/vid/stage_loop.mp4">
</video>
</div>
<script>
// Copy video to canvas
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
v.addEventListener('play', function(){
draw(this,context,canvas.width,canvas.height);
},false);
},false);
function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
c.drawImage(v,0,0,w,h);
setTimeout(draw,20,v,c,w,h);
}
</script>
Css:
#slider {
display: block;
width: 100%;
height: 100vh;
background-color: black;
overflow: hidden;
position: relative;
}
#slider canvas {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
min-width: 1920px;
min-height: 1080px;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#slider video {
position: absolute;
width: 20px;
height: 20px;
opacity: 0;
}
What could I do?:/
I've found nothing related online, I'm a beginner using html canvases
You will need to draw the video onto one canvas, then draw the fragments (in any order you choose) from that canvas onto a second canvas, which will be what's displayed.
This is how all video manipulation is done, for example this (somewhat famous and old) "explosion" example using video and mapping it to the canvas:
http://www.craftymind.com/blowing-up-html5-video-and-mapping-it-into-3d-space/
Have a look at the drawImage() documentation on MDN. You can scale and position the video for each frame by adjusting the source and destination parameters in drawImage(). For example, to draw a 20 pixel vertical stripe of video to the far right of the canvas, you would do this:
ctx.drawImage(
v, // video frame
0,0,20,h, // source: x=0, width 20
w-20,0,20,h // destination: x=(w-20), width 20
);
Adjust the x value in the destination will slide around the vertical stripes. Adjusting the x value in source will slide around the video. If you set the widths differently the canvas will stretch and scale.
Also you should be using requestAnimationFrame (rAF) instead of setTimeout. rAF let's the browser have more control over when to draw the image, freeing up resources and resulting in really smooth animations. The only time you would want to use setTimeout is if you were very particular about frame rate (how fast things animate) but even then there are ways to throttle rAF. Ideally you want 60 frames per second. rAF will aim for that and start to slow down if there is too much processing during each frame.
Currently working on an html5 video player. I am running into an issue where once the video element is fullscreen, my custom controls are not clickable due to the video's z-index being set to the max int value; the same as the controls z-index. the default browser media controls are already hidden.
<div id="video-container">
<video frameborder='0' id="page-video" playsinline>
<source src='{{source}}'>
</video>
<div class="container" id="player-controls">
<!-- controls go here -->
</div>
</div>
here's the css for the video container in fullscreen:
#video-container {
position: relative;
max-width: 512px;
margin: 0 auto;
}
here's the css for the video in fullscreen:
#page-video:-webkit-full-screen {
width: 100%;
height: 100%;
position: relative;
z-index: 1 !important;
}
Here is the css for the controls:
#player-controls {
position: absolute;
bottom: 0;
left: 0;
max-width: 100%;
height: auto;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
visibility: hidden;
transition: all .2s linear;
padding: 0;
width: 100%;
z-index: 2147483647;
cursor: pointer;
}
in the Chrome dev tools, the computed z-index for the video element is changed from auto when its NOT in fullscreen to 2147483647 however clicking on the arrow to expand, it shows the z-index: 1 !important style from my style sheet. This style is not crossed out or anything. I don't really understand why this is happening. These are the only two places in my entire style sheet that use z-index. There are no negative z-indexes anywhere.
The video tag will ignore the z-index you set on it and use the UA styles of "auto" and 2147483647 unless you set position: absolute or position: fixed on it. See HTML5 video ignoring z-index
To hide the native controls, you need to disable them via the "controls" attribute.
<video controls="false">...</video>
In some browsers, there seems to be a bug so that the native controls are still visible in fullscreen mode. You can override the browsers stylesheet and hide them manually:
video::-webkit-media-controls {
display:none !important;
}
To show your custom controlls, simply set the z-index to the max int value.
#player-controls {
z-index: 2147483647;
}
All of this is described in this blog: https://css-tricks.com/custom-controls-in-html5-video-full-screen/
I just have started with the <canvas> in HTML, i'm facing some issues.
I'm trying to set the canvas width and height using CSS, but not getting the actual value i.e. Even after changing the height in CSS, it's giving me height as 150 and width as 300 always.
fillRect() is giving me blurred out image, but I want sharp image. For this I looked out for other resources, which said fillRect() and strokeRect() half-inside and half-outside the x, y co-ordinate. Here's the link to that. But I'm not able to understand what exactly the guy is doing to solve the issue.
Here's my code
<!DOCTYPE html>
<html>
<head>
<title>Canvas Drawing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
html, body {
margin: 0;
padding: 0;
}
h1 {
background-color: #2DE0E6;
color: black;
text-align: center;
font-style: oblique;
width: 100%;
height: 100px;
line-height: 100px;
letter-spacing: 2px;
text-transform: uppercase;
font-family: 'Courier New';
font-size: 40px;
}
#canvas-container {
width: 100%;
text-align: center;
margin: auto;
float: right;
}
#myCanvas {
border: 1px solid #c3c3c3;
width: 65%;
height: 450px;
display: inline;
}
</style>
</head>
<body>
<h1>Canvas Drawing</h1>
<div id="canvas-container">
<canvas id="myCanvas"></canvas>
<br /><br />
Draw a rectangle
</div>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.fillStyle = "#FF0000";
context.fillRect(5.5, 10.5, 90, 80);
</script>
</body>
</html>
Also, some resources for an in-depth knowledge of <canvas> will be very much appreciated.
Your problem is that the canvas has two sizes: the actual HTML element size and the drawing surface size
When you size the canvas with CSS, you only affect the drawing size. In order to change the element size, you need to set it with the height and width attributes inside the canvas element.
This is why you are getting 150 x 300 pixels all the time. That is the default size of the canvas element. You haven't actually change the size of the canvas element, only the size of its drawing surface.
Just change your canvas element like this
<canvas id="myCanvas" width="600" height="800"></canvas>
If you want more dynamic values you can use javascript to dynamically change the value of the height and width attributes.
var canvas = document.getElementById('myCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight / 2;
Changing the size this way resizes the element and the drawing surface. Resizing with CSS only modifies the canvas drawing surface.
The blurred out image might be a product of the wrong resizing of your canvas, but I am not sure.
Here is more info: Canvas Basic Usage
I'm currently working on a project that involves a circle being randomly filled with a color to a certain point. I used a div with border-radius to create the circle + overflow:hidden and another div to imitate the 'filling'.
See JSFiddle
HTML:
<div class="circleswrap">
<div class="circlediv">
<div class="circle">
<div id="animateddiv1">
</div>
</div>
</div>
</div>
CSS:
.circle {
position: relative;
border-radius: 50%;
-o-border-radius: 50%;
overflow: hidden;
background: #8a8a8a;
width: 165px;
height: 165px;
display: inline-block;
margin: 0 75px;.
}
#animateddiv1 {
background: #63B23A;
position: absolute;
top: 130px;
width: 200px;
height: 165px
}
Awesome works great in my browsers BUT i have to get it to work on a outdated Opera browser which is integrated into a smart display monitor (and practically un-updateable).
As we all know the older versions of Opera did not support the combination of border-radius + overflow:hidden + position: relative/absolute
PS: I Know -o-border-radius is not a 'thing' but i tried it nontheless... a man can always dream :^)
I've been trying to find a solution but i'm out of ideas.
I hope this wonderful community can help me out :)
This is a bit of a shot in the dark, as i don't know the version of opera required. But you can try to use a background-image: linear-gradient();
like this:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", 'linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
This seems to be supported from Opera 11.1
Of course don't foget the browser prefix -o-
So the code could look like this:
setInterval(function () {
var percentage = Math.floor(Math.random() * 100);
$(".circle").css("background-image", '-o-linear-gradient( 0deg, #63B23A ' + percentage + '%, #8a8a8a ' + percentage + '%' + ' )')
}, 3000);
here is a demo: http://jsfiddle.net/05dkfoxj/2/
Good luck.
The CSS clip-path property lets you specify an SVG shape to use as a mask for HTML content; that is probably the canonical way to do this moving forward.
I assume the version of Opera you're using is too old to support this property, or probably anything else that does what you want in a non-hacky way. If the circle is on a solid colored background, you could superimpose an opaque mask of the same color, i.e. a PNG with a circle cut out of it. More ambitiously, you might be able to use something like this technique to generate the image dynamically on a canvas, which (if it works) would allow for non-solid backgrounds. That would be complicated, though, and probably not feasible if any of the elements involved need to respond to pointer events.
Alternatively, if the content of the circles is just a picture, and not interactive, you could use a canvas to render the entire thing. Even quite old browsers should handle that, and CanvasRenderingContext2D knows how to clip drawing to a shape.
If the circle is against a solid background like in your example, you could create a PNG or SVG with the same colour background with a circle cut out and use it as an overlay. Remove the .circle element and place the image in .circlediv. It should give you the same effect as what you have.
.circlediv
{
width: (image width)
height: (image height)
postition: relative;
}
svg, png
{
z-index: 2;
width: 100%;
height: 100%;
position: absolute;
/* rest of your styling */
}
#animateddiv1
{
z-index:1;
position: absolute;
bottom:0;
width:100%;
/* rest of your styling */
}
I always tend to do this sort of thing because I know it'll work, even though I'd prefer to do it your way. You'll have issue in older versions of IE using border-radius, if you're supporting them.
Is there a way I can cut off the corners of my html5 video element using the CSS3 border-radius attribute?
Check out this example. it's not working.
Create a div container with rounded corners and overflow:hidden. Then place the video in it.
<style>
.video-mask{
width: 350px;
border-radius: 10px;
overflow: hidden;
}
</style>
<div class="video-mask">
<video></video>
</div>
We have a video playing with rounded corners and a drop shadow and it's as simple as:
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);
The key is the -webkit-transform: translateZ(0). This line of code tells the browser to render on the GPU instead of with the
Tested and working as of Safari 11, Chrome 65, Firefox 59, Edge Win 10 & IE 11
It works in Firefox as long as you set the appropriate 180px height for the 320px width video (16:9 aspect ratio) - otherwise the curved borders aren't visible because they're outside the frame of the video.
There are some outstanding bugs in WebKit to do with it clipping content in concert with border-radius, like this one or this one specifically about the video element.
Unfortunately, Chrome and Safari do not support border-radius on <video> elements.
If all of your videos are the same size, you could use a CSS mask with an SVG file. If your videos are dynamically sized, that makes things more difficult...
(edit: the SVG mask seems to automatically scale, so this solution should work)
e.g., you can add
-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)
to your .rc class and it should work in Chrome.
edit: this only seems to work if you remove your inline height and width declarations on your video... You can put them in your CSS, though.
http://jsfiddle.net/QWfhF/2/
Try this. It should work.
-webkit-mask: url(mypath/mask.png);
where the mask.png should be a rounded corner shape.
Did this quick with a circle.
[url removed]
Update October 2019
Border-radius for video now works on firefox, chrome and safari on mac, android and iOS.
Chrome Mobile Bug - if some Chrome android browsers cause you problems with rounding just add the following property to the video css. It's just a 1px transparent image which solves the chrome border-radius rendering bug for android phones
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
Test it here - https://jsfiddle.net/hzd4vec2/
<!DOCTYPE html>
<html>
<head>
<title>Border-radius test</title>
<style type="text/css">
body{
background: #000000;
margin: 0px;
}
#capsule{
height: 600px;
background: #000;
border-radius: 1000px;
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
</style>
</head>
<body>
<video id="capsule" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"
autoplay muted loop></video>
</body>
</html>
Tested on Chrome, Firefox, and Safari:
CSS:
.rounded {
border-radius: 20px;
overflow: hidden;
-webkit-transform: translateZ(0);
}
HTML:
<div class="rounded">
<video>.....</video>
</div>
remove the width property
http://jsfiddle.net/vDPW2/10/
Try read this: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/
And for CSS would be:
video{
width:320px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
overflow:hidden;
}
This can be done with canvas and JavaScript at least (Introduction how to manipulate video frame data with canvas). You basically draw a new canvas, apply the video frame data there, then clip the rounded corners off. I created this quickly, so didn't check whether the anti-aliasing could have been improved, but at least it does the rounding. Performance wise, you can imagine this isn't really as good as applying CSS or something, but it should work on all canvas supported browsers at least.
var video = document.getElementById("video");
var c1 = document.getElementById("roundy");
var ctx = c1.getContext("2d");
video.addEventListener("play", function() {
timerCallback();
}, false);
var timerCallback = function() {
if (video.paused || video.ended) {
return;
}
computeFrame();
setTimeout(function () {
timerCallback();
}, 0);
};
var computeFrame = function() {
var w = 480;
var h = 320;
var r = 20;
ctx.clearRect(0,0,w,h);
ctx.globalCompositeOperation = 'destination-atop';
ctx.fillStyle = "#09f";
roundRect(ctx, 0,0,w,h,r,true,false);
ctx.drawImage(video, 0, 0, w, h);
return;
}
// http://js-bits.blogspot.com/2010/07/canvas-rounded-corner-rectangles.html
function roundRect(ctx, x, y, width, height, radius, fill, stroke) {
if (typeof stroke == "undefined" ) {
stroke = true;
}
if (typeof radius === "undefined") {
radius = 5;
}
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
ctx.clip();
}
Example: http://jsfiddle.net/niklasvh/aFcUh/ (play the top video to view the effects on the bottom canvas one).
class="img-rounded" from bootstrap works fine for me using video.js
<link href="//vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.3/video.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin img-rounded"
controls preload="auto" width="640" height="264">
<source src="http://example.com/test_video.mp4" type='video/mp4'/>
</video>
Following solution works on my site with video tag and youtube embedded
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
<div class="video">
<iframe width="640" height="480" src="https://www.youtube.com/embed/..." frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
</div>
<div class="video">
<video controls>
<source src="..." type="video/mp4">
</video>
</div>
UPD
I had issue with youtube embedded iframe, container .video had height bigger 3px than its child iframe. And it made bottom corners a little bit incorrect.
Just add font-size: 0 to .video class, fixed the problem
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
font-zie: 0
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
I got this working for modern browsers with a parent (div) and the video inside.
The parent has the border-radius: 8px and overflow: hidden. The video just needs display: grid to make the bottom edged rounded too.
I accomplished this using only CSS and a sprite image. This works in all browsers and does not require any JavaScript.
By surrounding the video with a div that is set to position: relative; you can place four divs in each of the four corners on top of the video using z-index and absolute positioning. Then place a sprite background image into each of the four corners that rounds the edge with the same color as the background color. Essentially covering the video with an image of a corner.
Here is a working example: http://jsfiddle.net/476tC/
The code for it also located below:
<style>
video {
width: 100%;
height: auto;
}
.corner-frame {
width: 100%;
position: relative;
}
.corner-top-left, .corner-top-right, .corner-bot-left, .corner-bot-right {
width: 10px;
height: 10px;
position: absolute;
background: url(http://i45.tinypic.com/5l520j.png) no-repeat;
z-index: 1;
}
.corner-top-left { top: 0; left: 0; background-position: 0 0 ; }
.corner-top-right { top: 0; right: 0; background-position: -10px 0 ; }
.corner-bot-left { bottom: 4px; left: 0; background-position: 0 -10px ; }
.corner-bot-right { bottom: 4px; right: 0; background-position: -10px -10px ; }
</style>
<div class="corner-frame">
<video controls>
<source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes.mp4" type="video/mp4">
<source src="http://ia700204.us.archive.org/18/items/blue_shoes/blue_shoes-portable.ogv" type="video/ogg">
</video>
<div class="corner-top-left"></div>
<div class="corner-top-right"></div>
<div class="corner-bot-left"></div>
<div class="corner-bot-right"></div>
</div>
The sprite I created is only 20px x 20px and only rounds about 10px off the corner. If you would like to download the photoshop file and change the corner color or increase the size you can get the PSD file here: http://www.mediafire.com/?bt9j0vhsmzfm9ta
As has been said border-radius does work in Firefox and Chrome depending on video type. I found it necessary to style using video, video::first-child for mp4. There is probably an inner layer(border) to mp4s. I did the first-child bit when I noticed ogg and webm were working whereas mp4 was not.
remove width="320" height="240"from inside of video tag and add to your css file .rc{width:320; height:240; outline:none; border-radius:15px }
I hope this solution is work for you :)
2022 answer:
Set the video height to max-content and simply use the border-radius:
video {
height: max-content;
border-radius: 16px;
}
A better alternative is to use object-fit (plus object-position) if you don't want to mess with the height:
video {
object-fit: cover; /* so the video covers all the available space */
object-position: center; /* not required */
border-radius: 16px;
}
One attribute does the job and can be added as a class directly on the video tag. The class would look like:
.video-mask
{
border-radius: 3em;
}
If you add these properties:
max-width: 100%;
display: block;
margin: auto;
padding: 1em;
You will have a centered responsive rounded video that resizes to keep its aspect ratio and stays in the middle. None of these are strictly necessary though.