wake-up-neo.net

abgerundete Ecken auf HTML5-Video

Gibt es eine Möglichkeit, die Ecken meines html5-Videoelements mit dem CSS3-Attribut "border-radius" abzuschneiden?

Check out dieses Beispiel . es funktioniert nicht.

29
Web_Designer

Erstellen Sie einen Div-Container mit abgerundeten Ecken und Überlauf: ausgeblendet. Dann legen Sie das Video hinein. 

<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>
16
Wreeecks

Dies funktioniert in Firefox, solange Sie die entsprechende 180px-Höhe für das Video mit 320px-Breite einstellen (Seitenverhältnis 16: 9) - andernfalls sind die geschwungenen Ränder nicht sichtbar, da sie außerhalb des Videobildes liegen.

Es gibt einige ausstehende Fehler in WebKit, die dazu führen, dass Inhalte zusammen mit border-radius abgeschnitten werden, wie hier oder hier spezifisch über das Videoelement .

7
robertc

Leider unterstützen Chrome und Safari keinen Randradius für <video>-Elemente.

6
Guil Hernandez

Wenn alle Ihre Videos die gleiche Größe haben, können Sie eine CSS-Maske mit einer SVG-Datei verwenden. Wenn Ihre Videos eine dynamische Größe haben, wird das schwieriger ... (Bearbeiten: Die SVG-Maske scheint automatisch zu skalieren, daher sollte diese Lösung funktionieren)

sie können beispielsweise hinzufügen

-webkit-mask-image: url(http://f.cl.ly/items/1e181Q0e3j0L3L3z2j3Z/rect.svg)

zu Ihrer .rc-Klasse und es sollte in Chrome funktionieren.

bearbeiten: Dies scheint nur zu funktionieren, wenn Sie Ihre Inline-Deklarationen height und width von Ihrem Video entfernen.

http://jsfiddle.net/QWfhF/2/

5
Jeff

Versuche dies. Es sollte funktionieren.

-webkit-mask: url(mypath/mask.png);

wobei die Maske.png eine abgerundete Eckenform sein sollte . Hat dies schnell mit einem Kreis ausgeführt . [Url entfernt]

3
Benjamin

Dies kann mindestens mit Canvas und JavaScript erfolgen ( Einführung, wie Videobilddaten mit Canvas bearbeitet werden ). Sie zeichnen grundsätzlich eine neue Leinwand, wenden die Videobilddaten dort an und schneiden die abgerundeten Ecken ab. Ich habe dies schnell erstellt, also nicht geprüft, ob das Anti-Aliasing verbessert werden konnte, aber zumindest macht es die Rundung. In Bezug auf die Leistung können Sie sich vorstellen, dass dies nicht so gut ist wie das Anwenden von CSS oder etwas, aber es sollte zumindest mit allen Canvas-unterstützten Browsern funktionieren.

   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(); 
}

Beispiel: http://jsfiddle.net/niklasvh/aFcUh/ (Spielen Sie das obere Video ab, um die Effekte auf der unteren Leinwand anzuzeigen).

2
Niklas

entfernen Sie die Eigenschaft width http://jsfiddle.net/vDPW2/10/

2
SRN

Bitte lesen Sie folgendes: http://www.gerbenvanerkelens.com/1778/let%E2%80%99s-talk-about-the-html5-video-tag/

Und für CSS wäre:

video{
    width:320px;
    -moz-border-radius:40px;
    -webkit-border-radius:40px;
    border-radius:40px;
    overflow:hidden;
}
2
ZeroSuf3r

class="img-rounded" von bootstrap funktioniert gut mit 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>
1
Tom

Die folgende Lösung funktioniert auf meiner Website mit Video-Tag und eingebettetem 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 Ich hatte ein Problem mit eingebettetem Youtube-iframe in Youtube, der Container .video hatte eine um 3px größere Höhe als sein untergeordnetes iframe. Und die unteren Ecken waren etwas unkorrekt .. __ Fügen Sie einfach die Schriftgröße: 0 zur .video-Klasse hinzu, das Problem wurde behoben

.video{
    border-radius: 10px;
    overflow: hidden;
    z-index: 1;
    font-zie: 0
    height: 480px; /*it can deleted, if height is not restricted*/
    width: 640px; 
}
1
Sergey

Wir haben ein Video mit abgerundeten Ecken und einem Schatten, und es ist so einfach wie:

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);

Der Schlüssel ist die -webkit-transform: translateZ(0). Diese Codezeile weist den Browser an, auf der GPU zu rendern, anstatt mit der 

Getestet und ab Safari 11, Chrome 65, Firefox 59, Edge Win 10 & IE 11 getestet

1
Gregg

Ich habe diese Funktion für moderne Browser mit einem übergeordneten Element (div) und dem Video im Inneren verwendet .. Das Elternteil hat das border-radius: 8px und das overflow: hidden. Das Video benötigt lediglich display: grid, um auch die unteren Kanten abgerundet zu machen.

0
karlludwigweise

Ich habe dies nur mit CSS und einem Sprite-Bild erreicht. Dies funktioniert in allen Browsern und erfordert kein JavaScript.

Umgeben Sie das Video mit einem div, das auf position gesetzt ist: relative; Sie können vier Divs in jeder der vier Ecken über dem Video mithilfe von Z-Index und absoluter Positionierung platzieren. Platzieren Sie dann ein Sprite-Hintergrundbild in jeder der vier Ecken, die den Rand mit der gleichen Farbe wie die Hintergrundfarbe abrunden. Im Wesentlichen wird das Video mit einem Bild einer Ecke abgedeckt.

Hier ist ein Arbeitsbeispiel: http://jsfiddle.net/476tC/

Der Code dafür befindet sich auch unten:

<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>

Das Sprite, das ich erstellt habe, ist nur 20 x 20 Pixel und rundet nur 10 Pixel von der Ecke ab. Wenn Sie die Photoshop-Datei herunterladen und die Eckfarbe ändern oder die Größe erhöhen möchten, können Sie die PSD-Datei hier herunterladen: http://www.mediafire.com/?bt9j0vhsmzfm9ta

0
J Grover