css - sombras - esquinas redondeadas en html5 video
imagenes redondas css (12)
¿Hay alguna manera de cortar las esquinas de mi elemento de video html5 usando el atributo de radio de borde CSS3?
Echa un vistazo a este ejemplo . no funciona.
Crea un contenedor div con esquinas redondeadas y rebosante: oculto. Luego coloca el video en él.
<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>
Desafortunadamente, Chrome y Safari no admiten el radio de borde en <video> elementos <video> .
Esto se puede hacer con lienzo y JavaScript al menos ( Introducción sobre cómo manipular datos de cuadros de video con lienzo ). Básicamente, dibuja un nuevo lienzo, aplica los datos del cuadro de video allí y luego corta las esquinas redondeadas. Creé esto rápidamente, así que no verifiqué si se podía mejorar el suavizado, pero al menos lo redondea. En cuanto al rendimiento, puedes imaginar que esto no es realmente tan bueno como aplicar CSS o algo así, pero debería funcionar al menos en todos los navegadores compatibles con lienzos.
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();
}
Ejemplo: http://jsfiddle.net/niklasvh/aFcUh/ (reproduzca el video superior para ver los efectos en el lienzo inferior).
Funciona en Firefox siempre que establezca la altura adecuada de 180 píxeles para el video con un ancho de 320 píxeles (relación de aspecto 16: 9); de lo contrario, los bordes curvos no serán visibles porque están fuera del marco del video.
Hay algunos errores sobresalientes en WebKit que tienen que ver con el recorte de contenido en concierto con border-radius , como este o este específicamente sobre el elemento de video .
La siguiente solución funciona en mi sitio con la etiqueta de video y youtube incrustados
.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 Tuve problemas con el iframe incrustado en youtube, el contenedor .video tenía una altura mayor a 3px que su iframe secundario. Y hacía esquinas inferiores un poco incorrectas. Solo agregue el tamaño de fuente: 0 a la clase .video, solucionó el problema
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
font-zie: 0
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
Logré esto usando solo CSS y una imagen de sprite. Esto funciona en todos los navegadores y no requiere ningún JavaScript.
Rodeando el video con un div que se establece en posición: relativo; puede colocar cuatro divs en cada una de las cuatro esquinas encima del video usando z-index y posicionamiento absoluto. Luego coloque una imagen de fondo de sprite en cada una de las cuatro esquinas que redondea el borde con el mismo color que el color de fondo. Fundamentalmente cubriendo el video con una imagen de un rincón.
Aquí hay un ejemplo de trabajo: http://jsfiddle.net/476tC/
El código para ello también se encuentra a continuación:
<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>
El sprite que creé es de solo 20px x 20px y solo redondea alrededor de 10px de la esquina. Si desea descargar el archivo de Photoshop y cambiar el color de la esquina o aumentar el tamaño, puede obtener el archivo PSD aquí: http://www.mediafire.com/?bt9j0vhsmzfm9ta
Prueba esto. Deberia de funcionar.
-webkit-mask: url(mypath/mask.png);
donde la máscara.png debe ser una forma de esquina redondeada. Hizo esto rápido con un círculo http://versusestudio.com/experiments/circlevideotest/
Si todos sus videos son del mismo tamaño, podría usar una máscara CSS con un archivo SVG. Si sus videos tienen un tamaño dinámico, eso dificulta las cosas ... (edición: la máscara SVG parece escalarse automáticamente, por lo que esta solución debería funcionar)
por ejemplo, puede agregar
-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)
a su clase .rc y debería funcionar en Chrome.
edición: esto solo parece funcionar si elimina las declaraciones de height y width en línea en su video ... Sin embargo, puede ponerlas en su CSS.
Tenemos un video que se reproduce con esquinas redondeadas y una sombra paralela, y es tan simple como:
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 clave es la -webkit-transform: translateZ(0) . Esta línea de código le dice al navegador que se procese en la GPU en lugar de con la
Probado y funcionando a partir de Safari 11, Chrome 65, Firefox 59, Edge Win 10 e IE 11
Trate de leer esto: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/
Y para CSS sería:
video{
width:320px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
overflow:hidden;
}
eliminar la propiedad de ancho http://jsfiddle.net/vDPW2/10/
class="img-rounded" desde bootstrap funciona bien para mí usando 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>