WEBサイト上で動画の背景を切り抜く方法 - 動画を透過する方法

こんちゃ！洋梨🍐です。

皆さん、Webサイトなど作っているとき「動画を透過したい🥺」なんて思ったことありませんか？

おそらく100万回くらいはあると思います。

さて、今回は「動画の背景を切り抜いてWebページに載せる方法」についての記事です。

考えられる方法

さて、そんな動画を透過する方法ですが、どんな方法があるのか考えてみたいと思います。

1. GIFにする

これはよく使われるかつ、考え付く方法かと思います。

GIF画像には透明色指定をすることが出来るので、動画をGIF形式にすることで透過ありの動画を埋め込むことが出来ます。

扱いやすく、シンプルな動画だったり低解像度・短めの動画だったらこれで事足ります。

しかし、このデメリットは扱える色が少ないことだったり、サイズ・長さが長いと読み込みに時間がかかる＝サイトが重くなってしまう等があります。

2. 連番画像をスクリプトで読み込む

動画をコマごとに画像に分け、JavaScriptで切り替えていくといった方法です。

この方法は、以前の記事「Appleのようなサイトを作る方法」でも紹介した方法になるのですが、時間で画像を切り替えることで再現できます。

メリットとしては好きなタイミングで好きなシーンを表示したり、好きな位置でこのシーンを出したい、そういった要件に簡単に対応できることや、元は画像なので止めたときに比較綺麗に表示できること等があります。

デメリットは画質、フレームレートによって容量が大きい、処理落ちする可能性がある等があります。

シーンによって使い分ければ良い効果を与えることが出来そうです。

3. WebM動画を使う

この方法はそもそも透過に対応した動画を使うという方法です。

「え、これでいいじゃん」

と、思ったかと思います。

しかし、この形式Googleが作った新しい規格ゆえ、iphoneに対応していないのです🥺

なので、使い分けが必要なものとなっています。

↑ WebM動画の例 (対応していないデバイスでは表示されません。)

※ただ、MacOSでは動くようになったこと、iOS15ではWebMの音声コーデックのサポートが追加されたことから、もういずれ追加(対応)されるのではないかと思います👼

※この動画の作り方、デバイスごとの使い分け等、その他詳しくは、別記事にでも書くかもしれません。

4. クロマキー動画からスクリプトでマスクする

最後にグリーンバックなどになっている動画をクロマキーで切り抜き、キャンバス(Webサイト)に書き込む方法です。

実行している様子
左が動画で右がクロマキー処理後のCanvas上に描かれたイメージ

上図の通り、左に表示された動画を右のCanvas上に描画する際、クロマキー処理をしているのがわかると思います。

このメリットはどの動画にも対応できる点(Webページで表示・読み込みができる前提)です。

デメリットは動画、もしくは背景との組み合わせによってジャギーが目立ったり、処理速度などの問題がある事です。

// Sample.html
<html>
<body>
    <video controls id="video" width="480" height="320" style="display: auto" muted>
        <source src="./testmovie.mp4" width="480" height="320">
    </video>
    <canvas id="canvas" width="480" height="320"></canvas>
    <script>
        const run = () => {
            var video = document.getElementById("video");
            if(video.paused) video.play();
            else video.pause();
            setInterval(() => {
                console.log("interval")
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext("2d")
                context.drawImage(video, 0, 0, 480, 320);
                var image = context.getImageData(0, 0, canvas.width, canvas.height);
                for(var i = 0; i < (image.width* image.height); i++) {
                    if(
                        (image.data[i4] <= 50) && // R
                        (image.data[i4+1] >= 200) && // G
                        (image.data[i4+2] <= 50) // B
                    ){ image.data[i4+3] = 0; } // A
                }
                context.putImageData(image, 0, 0);
            }, 0.03);
        }
        setTimeout(()=> run(), 1)
    </script>
</body>
</html>

このスクリプトではまず、動画(Video)をCanvasにdrawImage()で書き込み、getImageData()で画像データー(ピクセル)として処理していくといった形です。

この方法ではグリーンに近い色(RGB)のピクセルのAlpha値を0にすることで透明にしています。

ただ、今回は省略しますがこの方法(RGB)だけではなくHSV等他の色空間を使ったり、周辺のピクセルに対する処理(境界補正)など組み合わせたり、実装するのがベストだと思います。

まとめ

さて、今回はこんな感じで動画を透過する方法について考えましたが、実際、他にも別のアプローチ方法はあるかと思います。

しかし、結論「WebMが全デバイス対応してほしい」これに限りました。👼

(他にもいい方法などありましたら是非メッセージください^^)

今回はここまでです☻

読んでくれた皆さん、ありがとうございました～^^b

タグ: JavaScript, Web