coins arrondis sur vidéo html5
Est-il possible de couper les angles de mon élément vidéo html5 en utilisant l'attribut CSS3 border-radius?
Découvrez cet exemple . ça ne fonctionne pas.
Créez un conteneur div avec des coins arrondis et un débordement: hidden. Ensuite, placez la vidéo en elle.
<style>
.video-mask{
width: 350px;
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
-webkit-transform: rotate(0.000001deg);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
overflow: hidden;
}
</style>
<div class="video-mask">
<video></video>
</div>
Cela fonctionne dans Firefox aussi longtemps que vous définissez la hauteur appropriée de 180px pour la vidéo de 320px de large (rapport d'aspect 16: 9) - sinon les bordures courbes ne sont pas visibles car elles sont en dehors du cadre de la vidéo.
WebKit présente des bogues remarquables liés à l'écrêtage de contenu conjointement avec border-radius, comme celui-ci ou celui-ci concernant l'élément vidéo .
Malheureusement, Chrome et Safari ne prennent pas en charge border-radius sur les éléments <video>.
Si toutes vos vidéos ont la même taille, vous pouvez utiliser un masque CSS avec un fichier SVG. Si vos vidéos sont dimensionnées de façon dynamique, cela rend les choses plus difficiles .... (modifiez: le masque SVG semble automatiquement redimensionner, cette solution devrait donc fonctionner)
par exemple, vous pouvez ajouter
-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)
à votre classe .rc et cela devrait fonctionner dans Chrome.
edit: cela ne semble fonctionner que si vous supprimez vos déclarations height et width inline dans votre vidéo ... Vous pouvez cependant les insérer dans votre CSS.
Essaye ça. Ça devrait marcher.
-webkit-mask: url(mypath/mask.png);
où le masque.png devrait être une forme de coin arrondi . Est-ce que rapide avec un cercle .
Cela peut être fait au moins avec canvas et JavaScript ( Introduction à la manipulation des données d'image vidéo avec canvas ). En gros, vous dessinez un nouveau canevas, y appliquez les données d'image vidéo, puis vous coupez les coins arrondis. J'ai créé cela rapidement, donc je n'ai pas vérifié si l'anti-aliasing aurait pu être amélioré, mais au moins, il arrondit. En ce qui concerne les performances, vous pouvez imaginer que cela n’est pas aussi efficace que d’appliquer du CSS, mais cela devrait au moins fonctionner avec tous les navigateurs supportés.
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();
}
Exemple: http://jsfiddle.net/niklasvh/aFcUh/ (joue la vidéo du haut pour afficher les effets sur celle du bas).
supprime la propriété width http://jsfiddle.net/vDPW2/10/
Essayez de lire ceci: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/
Et pour CSS serait:
video{
width:320px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
overflow:hidden;
}
class="img-rounded" de bootstrap fonctionne bien pour moi en utilisant 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>
La solution suivante fonctionne sur mon site avec la balise video et 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 J'avais un problème avec iframe intégré dans youtube, le conteneur .video avait une hauteur supérieure à 3 pixels de celle de son enfant iframe. Et cela rendait les coins inférieurs un peu incorrects . Ajoutez juste la taille de la police: 0 à la classe .video, corrige le problème
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
font-zie: 0
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
Nous avons une vidéo jouant avec des coins arrondis et une ombre portée, aussi simple que:
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);
La clé est la -webkit-transform: translateZ(0). Cette ligne de code indique au navigateur de rendre sur le GPU au lieu de
Testé et fonctionnant à partir de Safari 11, Chrome 65, Firefox 59, Edge Win 10 et IE 11
Je travaille pour les navigateurs modernes avec un parent (div) et la vidéo à l'intérieur . Le parent a les border-radius: 8px et overflow: hidden. La vidéo a simplement besoin de display: grid pour que le bord inférieur soit également arrondi.
J'ai accompli cela en utilisant uniquement du CSS et une image Sprite. Cela fonctionne dans tous les navigateurs et ne nécessite aucun JavaScript.
En entourant la vidéo d'un div qui est défini sur position: relative; vous pouvez placer quatre divs dans chacun des quatre coins au-dessus de la vidéo en utilisant le z-index et le positionnement absolu. Placez ensuite une image d’arrière-plan Sprite dans chacun des quatre coins qui arrondissent l’Arête avec la même couleur que la couleur d’arrière-plan. Couvrant essentiellement la vidéo avec une image d'un coin.
Voici un exemple de travail: http://jsfiddle.net/476tC/
Le code pour cela également situé ci-dessous:
<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>
Le Sprite que j'ai créé mesure seulement 20 x 20 pixels et arrondit environ 10 pixels du coin. Si vous souhaitez télécharger le fichier Photoshop et modifier la couleur du coin ou augmenter la taille, vous pouvez obtenir le fichier PSD ici: http://www.mediafire.com/?bt9j0vhsmzfm9ta