SVG

動画をSVGでマスク処理

2015/02/04

動画を全画面で表示して、さらにその上にSVGで作成したマスクで処理した動画を表示してみる実験。結果から言うとchromeでのみ表示できた。あと動画2本読み込んでいるでせいかロード時にもたつく。

=================================
動画をマスク処理DEMO (chromeのみ)
=================================

以下手順

(1) イラストレーターでマスクとなるパスを作成する。

02

まず、イラストレーター等でマスクとなるパスを作成する。その際アートボードをオブジェクトにピッタリと合わせていると後々便利。アートボードの大きさがhtmlに持ってきた時のSVGのwidth、heightとなります。

(2) 作成したパスを別名保存 → SVGで保存。

01

上記で作成したパスを「別名で保存」→ 「ファイルの種類 SVG」で保存。

(3) 背景になる全画面の動画を表示。

次に背景となる動画を全画面で表示。

html

<video autoplay="" loop="" poster="">
<source src="movie/train.mp4" type="video/mp4">
<p>動画を再生するには、videoタグをサポートしたブラウザーが必要です。</p>
</video>

css

video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -10;
background-size: cover;
}

(4) 手順(2)で作成したファイルをエディターで開いてソースをコピー。

イラストレーターで作成したsvgファイルをエディターで開いて、svgタグで囲まれた部分をコピーしてhtmlへペースト。

html

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="381.66px" height="139.026px" viewBox="0 0 381.66 139.026" enable-background="new 0 0 381.66 139.026"
xml:space="preserve">
<g>
<path d="M2.163,40.513c20.09

~ 途中省略 ~

v13.732h72.851l8.961-V52.944z"/>
</g>
</svg>

<video autoplay="" loop="" poster="">
<source src="movie/train.mp4" type="video/mp4">
<p>動画を再生するには、videoタグをサポートしたブラウザーが必要です。</p>
</video>

(5) マスクされる動画を貼り付けclipPathでマスク処理。

貼り付けたsvgタグ内のg要素をclipPath要素に変更しidを設定。マスクされる動画を記述してcssでclipPathを設定。clip-path: url();の()に先ほど名づけたidを設定。(ここではclip-path: url(#svgPath);)
z-indexも設定。

html

<video autoplay="" loop="" poster="movie/enoshima.jpg" class="mask">
<source src="movie/enoshima.mp4" type="video/mp4">
<p>動画を再生するには、videoタグをサポートしたブラウザーが必要です。</p>
</video>

<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="381.66px" height="139.026px" viewBox="0 0 381.66 139.026" enable-background="new 0 0 381.66 139.026"
xml:space="preserve">
<clipPath id="svgPath">
<path d="M2.163,40.513c20.09

~ 途中省略 ~

v13.732h72.851l8.961-V52.944z"/>
</clipPath>
</svg>

<video autoplay="" loop="" poster="">
<source src="movie/train.mp4" type="video/mp4">
<p>動画を再生するには、videoタグをサポートしたブラウザーが必要です。</p>
</video>

css

.mask {
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
left: 25%;
top: 100px;
z-index: 1000;
}

IEは動かないのはある意味予想どおりだけど、Firefox、Safariあたりだと動きそうなものだけど動かない。


-SVG

© 2020 MUKOLOG