ビデオhtml/cssにpngマスクを適用する

PNGマスクをMP4ファイルに適用する際に問題が発生しています。どこが間違っているのか分かりません。ビデオhtml/cssにpngマスクを適用する

#wee { 
    mask-image: url(dosebotdesigns.com/test4.png); 
}

このJSFiddleをチェックするためにお気軽に、HTMLは

<html> 
<body> 
    <video id="wee" autoplay src="dosebotdesigns.com/smoke.mp4"> 
</body> 
</html>

ようになり、CSSは読み込み： https://jsfiddle.net/tyd8wggr/

私の主な目標は、PNGをマスクすることですビデオを煙る。御時間ありがとうございます！

出典

2017-02-05 dosebot

ベンダープレフィックスを使用してください：https://jsfiddle.net/tyd8wggr/1/ – sdgluck

このタグは実験的であり、多くのブラウザでは機能しません。its compatibility matrixを参照してください。つまり、Chrome 55ishでは、既存のCSSに-webkit-mask-image: url(http://dosebotdesigns.com/test4.png);を追加するだけでうまくいきました。

編集（まあ、それディスプレイのように、あなたは画像とビデオの間のアスペクト比の違いを説明するためにいくつかの調整をする必要があります「正常に動作します」）：私はあなたが探していると思いますthisのようなものです。

出典

2017-02-05 21:24:02

はい！私が行っている実際の効果は、http://kemuri-tatsuya.com/のスプラッシュページです（私は彼らの煙を受けました：mp4：p） – dosebot

私はdivに2つの項目を入れることを考えていました。私は画像の境界を100％にしようとしましたが、明らかにCSSのものではありません。黒い背景を持つ私の「建設中」のイメージの隣に2つのdivを置くことがありますか？ – dosebot

これはChrome上で動作するには-webkit-mask-imageである必要がありますが、現在のところ一部のブラウザでのみ動作します。

出典

2017-02-05 21:28:53 TheContrarian

ビデオhtml/cssにpngマスクを適用する

答えて

関連する問題