HTML5ライブビデオキャンバスシェイプ

Question

ライブHTML5動画のために円形のフレーム（キャンバス）を作成しようとしています。私はkeyframes radiusプロパティでコーナーをカーブすることができますが、これは円ではなく楕円で私を残します。

理想的には、divオブジェクト（png画像）を動画のマスクとして使用できます。つまり、divオブジェクトは単なるサークルなので、ビデオをマスクするためにサークルを使用してもうれしいです。

は、ここに私の現在のコードです：

<style> 
    video, canvas { 
     z-index: 1; 
     position: absolute; 
     top: 10%; 
     left: 25%; 
     -webkit-border-radius: 50%; 
     -moz-border-radius: 50%; 
     -ms-border-radius: 50%; 
     border-radius: 50%; 
     overflow: hidden; 
    } 
</style> 
<video id="video" width="600" height="450" preload autoplay loop muted controls></video> 
<canvas id="canvas" width="600" height="600"></canvas> 

ビデオのための円形のマスクを取得するのではなく、ビデオを踏み付けられるように、アスペクトラジオを変更することが望ましいだろう。ありがとう！

Answer 1

含まれるdivとvideo要素を別々にスタイルします。 -webkit-mask-image を含むdivに-webkit-mask-imageを追加します。

-webkit-mask-image CSSプロパティは、要素のマスクイメージを設定します。マスク画像は、マスク画像の透明度に従って要素の可視部分をクリップする。

CSS

.canvas { 
    width: 600px; 
    height: 600px; 
    border-radius: 300px; 
    -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
} 

video { 
    width: 600px; 
    height: 600px; 
    position: absolute; 
    top: -125px; 
    left: -125px; 
} 

HTML

<div class="canvas"> 
    <video id="video" preload autoplay loop muted controls></video> 
</div> 

それが動作するかどうかを参照してください:)