Можно ли отключить углы моего элемента html5 с помощью атрибута border-radius CSS3?
Отметьте этот пример. он не работает.
Закругленные углы на html5 видео
Ответ 1
Создайте контейнер div с закругленными углами и переполнением: скрыто. Тогда поместите видео в это.
<style>
.video-mask{
width: 350px;
border-radius: 10px;
overflow: hidden;
}
</style>
<div class="video-mask">
<video></video>
</div>
Ответ 2
Он работает в Firefox до тех пор, пока вы установите соответствующую высоту 180px для видео ширины 320 пикселей (соотношение сторон 16: 9) - в противном случае кривые границы не будут видимые, потому что они находятся за рамкой видео.
В WebKit есть некоторые выдающиеся ошибки, которые позволяют обрезать контент в соответствии с border-radius, как этот или это конкретно о видеоэлементе.
Ответ 3
К сожалению, Chrome и Safari не поддерживают пограничный радиус на элементах <video>.
Ответ 4
Если все ваши видео имеют одинаковый размер, вы можете использовать маску CSS с SVG файлом. Если ваши видеоролики имеют динамический размер, это усложняет работу... (редактирование: маска SVG, кажется, автоматически масштабируется, поэтому это решение должно работать)
например, вы можете добавить
-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)
в ваш .rc класс, и он должен работать в Chrome.
edit: похоже, это работает, если вы удалите свои объявления inline height и width на своем видео... Вы можете поместить их в свой CSS.
Ответ 5
Попробуй это. Он должен работать.
-webkit-mask: url(mypath/mask.png);
где mask.png должен иметь форму закругленного угла. Сделал это быстро с кругом. [URL удален]
Ответ 6
удалить свойство width http://jsfiddle.net/vDPW2/10/
Ответ 7
Попробуйте прочитать это: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/
И для CSS будет:
video{
width:320px;
-moz-border-radius:40px;
-webkit-border-radius:40px;
border-radius:40px;
overflow:hidden;
}
Ответ 8
Это можно сделать с холстом и JavaScript как минимум (Введение, как манипулировать данными кадрового флага с холстом). Вы в основном рисуете новый холст, применяете данные видеокадра, а затем зажимаете закругленные углы. Я создал это быстро, поэтому не проверял, было ли улучшено сглаживание, но, по крайней мере, оно округляет. Производительность мудрая, вы можете себе представить, что это не так хорошо, как применение CSS или что-то в этом роде, но оно должно работать на всех браузерах, поддерживающих холст, по крайней мере.
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();
}
Пример: http://jsfiddle.net/niklasvh/aFcUh/ (воспроизведите верхнее видео, чтобы просмотреть эффекты на нижнем холсте).
Ответ 9
class="img-rounded" из bootstrap отлично работает для меня, используя 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>
Ответ 10
У нас есть видео, играющее с закругленными углами и падающей тенью, и это так просто, как:
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
Ответ 11
Следующее решение работает на моем сайте со встроенным тегом видео и YouTube
.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 У меня была проблема с встроенным iframe на youtube, контейнер.video имел высоту больше на 3 пикселя, чем его дочерний iframe. И это сделало нижние углы немного неправильными. Просто добавьте font-size: 0 в класс.video, исправьте проблему
.video{
border-radius: 10px;
overflow: hidden;
z-index: 1;
font-zie: 0
height: 480px; /*it can deleted, if height is not restricted*/
width: 640px;
}
Ответ 12
Я выполнил это, используя только CSS и изображение спрайта. Это работает во всех браузерах и не требует JavaScript.
Окружая видео с помощью div, который установлен в положение: relative; вы можете разместить четыре div в каждом из четырех углов поверх видео с помощью z-индекса и абсолютного позиционирования. Затем поместите фоновое изображение спрайта в каждый из четырех углов, окружающих край того же цвета, что и цвет фона. По существу, покрытие видео с изображением угла.
Вот рабочий пример: http://jsfiddle.net/476tC/
Код для него также расположен ниже:
<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>
Созданный мной спрайт только 20px x 20px и только раунды около 10px с угла. Если вы хотите загрузить файл photoshop и изменить цвет угла или увеличить размер, вы можете получить файл PSD здесь: http://www.mediafire.com/?bt9j0vhsmzfm9ta
Ответ 13
Я получил это работает для современных браузеров с родителем (div) и видео внутри. Родитель имеет border-radius: 8px и overflow: hidden. Видео просто нуждается в display: grid чтобы нижний край тоже округлился.
Ответ 14
Обновление октября 2019 года
Граница радиуса для видео теперь работает на firefox, chrome и safari на mac, android и Система IOS.
Chrome Mobile Bug - если некоторые браузеры Chrome для Android вызывают проблемы с округлением, просто добавьте следующее свойство в видео CSS. Это просто прозрачное изображение размером 1px, которое решает проблему рендеринга Chrome Border-radius для телефонов Android
-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
Проверьте это здесь - 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>