web-dev-qa-db-ja.com

html5ビデオの角の丸み

CSS3のborder-radius属性を使用してhtml5ビデオ要素の角を切り取る方法はありますか？

チェックアウト この例 。動いていない。

google-chromewebkithtml5-videocss
33
Web_Designer

角が丸く、overflow：hiddenのdivコンテナーを作成します。次に、その中にビデオを配置します。

<style>
.video-mask{
    width: 350px;
    border-radius: 10px; 
    overflow: hidden; 
}
</style>


<div class="video-mask">
    <video></video>
</div>
16
Wreeecks

それはあなたがFirefoxで動作する限り 20pxの幅のビデオに適切な180pxの高さを設定 （16：9のアスペクト比）-それ以外の場合、湾曲した境界線はフレームの外側にあるため表示されませんビデオ。

WebKitには、border-radius、 これと同じ 、または これは特にビデオ要素について と連携してコンテンツをクリッピングすることに関連するいくつかの未解決のバグがあります。

8
robertc

残念ながら、ChromeおよびSafariは<video>要素のborder-radiusをサポートしていません。

6
Guil Hernandez

すべての動画が同じサイズの場合、SVGファイルで CSSマスク を使用できます。ビデオのサイズが動的であると、状況がさらに難しくなります...（編集：SVGマスクは自動的にスケーリングされるようなので、このソリューションは機能するはずです）

たとえば、あなたは追加することができます

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

.rcクラスに追加すると、Chromeで動作するはずです。

編集：これは、ビデオのインラインheightおよびwidth宣言を削除した場合にのみ機能するようです...ただし、CSSに配置することはできます。

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

5
Jeff

これを試して。うまくいくはずです。

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

ここで、mask.pngは角の丸い形状である必要があります。円でこれをすばやくやりました。 [削除されたURL]

3
Benjamin

これは少なくともcanvasとJavaScriptで実行できます（ canvasでビデオフレームデータを操作する方法の紹介 ）。基本的には、新しいキャンバスを描画し、そこにビデオフレームデータを適用してから、丸みを帯びた角を切り取ります。私はこれをすばやく作成したので、アンチエイリアスが改善されているかどうかは確認しませんでしたが、少なくとも丸めは行いました。パフォーマンスの面では、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/ （上の動画を再生して、下のキャンバスの効果を表示します）。

2
Niklas

幅のプロパティを削除 http://jsfiddle.net/vDPW2/10/

2
SRN

これを読んでみてください： 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;
}
2
ZeroSuf3r

class="img-rounded" from 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>
1
Tom

次の解決策は、ビデオタグと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 [〜＃〜] YouTube埋め込みiframeに問題があり、コンテナー.videoの高さはその子iframeよりも3px大きかった。そして、それは底角を少し不正確にしました。 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; 
}
1
Sergey

丸みを帯びたコーナーとドロップシャドウで再生するビデオがあります。これは次のように簡単です。

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)です。このコード行は、ブラウザにではなく、GPUでレンダリングするように指示します

Safari 11でテストされ、動作しているChrome 65、Firefox 59、Edge Win 10＆IE 11

1
Gregg

私はこれを親（div）とビデオが内部にある最新のブラウザーで機能しました。親はborder-radius: 8pxおよびoverflow: hidden。ビデオが必要なのはdisplay: gridを使用して、底の角も丸くします。

0
karlludwigweise

2019年10月更新

ビデオのボーダー半径がfirefox、chromeおよびsafarionmac、AndroidおよびiOS。

Chromeモバイルのバグ-一部のChrome Androidブラウザによって丸めの問題が発生した場合次のプロパティを動画のCSSに追加するだけです。chrome border-radiusレンダリングのバグをAndroid phone

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

CSSとSprite画像のみを使用してこれを実現しました。これはすべてのブラウザで機能し、JavaScriptを必要としません。

位置に設定されたdivでビデオを囲むことにより：相対; Zインデックスと絶対配置を使用して、ビデオの上にある四隅のそれぞれに4つのdivを配置できます。次に、スプ​​ライトの背景画像を、背景色と同じ色でエッジを丸める四隅のそれぞれに配置します。本質的にコーナーのイメージでビデオをカバーします。

これが実際の例です： 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>

私が作成したSpriteは20px x 20pxだけで、角を約10pxだけ丸めます。フォトショップファイルをダウンロードして角の色を変更するか、サイズを大きくする場合は、PSDファイルをここで取得できます： http://www.mediafire.com/?bt9j0vhsmzfm9ta

0
J Grover