Q&A
対象ブラウザを気にしているなら、まずは想定するブラウザを書くべきです。優先度も書ければなお良いです(edge,ieは最悪切り捨てる とか。)。
アルファチャンネル付きの動画をWebサイトに埋め込みたいのですが可能でしょうか。
Gifだと重い＆ジャギジャギ、APINGだと対象ブラウザが少ないので、別の方法をと考えているのですが
例えば透過の動画ファイル（movのrgb+a）をcanvasで描画するなどで実現可能なのでしょうか。。。
説明不足でした。当然ではありますがシェアに応じてできるだけ広く対応できればと思っています。Edge,IEを切り捨てることで生まれる手段があるならご教示いただけると幸いです。
まずは質問文に対応ブラウザの事を追記してください。他の回答者にこの欄は目に付かない可能性が高いからです。あと、"当然…だから"な発想で質問するのは辞めたほうがいいです。実現したい事によって変わってきます。私の場合は事情によりchrome以外切り捨ててます。
ご指摘ありがとうございます。chromeだけの場合、どういった方法がありますか？
回答2件
0
似たような事をしたいと思い、色々と試しましたが、
JQuery プラグイン スライドショー VEGASを使って、動画 / APNG を動かしつつ、
端のほうをCSSで透過させるようにしたら、かなり良い感じになりました。
端のほうを透過させることで、動画内に収まりきらないコンテンツでも、
自然になじませることが出来ます。
linear-gradient(90deg, rgba(0,0,0,0) 85%, rgba(0,0,0,0.2) 94%, rgba(0,0,0,0.5) 98%, rgba(0,0,0,1.0) 100%)
投稿2022/03/29 15:07
総合スコア48
0
プロダクトレベルで試したことないので検証不十分ですが、以下のページを参考に出来ないでしょうか？
一応、IE11、Chではそれっぽく見えているようでした。
https://jakearchibald.com/scratch/alphavid/
投稿2018/10/12 09:02
退会済みユーザー
総合スコア0
ありがとうございます。
これってどうなってるんでしょう…？？
マークアップを見る限りvideoタグでは無理(そもそもmp4ファイルが透過していない)で、canvasを2つ重ねているように見えるのですが片方はRGB、もう片方はアルファチャンネルのマスク用とかですかね？？そういう理解で合ってますでしょうか、、
私の方でもh2md(https://h2md.axell-embedded.com/sp/)というライブラリを見つけたのですが、こちらも同様にRGBチャンネルとアルファチャンネルを別々に書き出しているように見受けられました。
以下のようなフローになりますかね？
①RGBとアルファチャンネルを別々に書き出す(動画かまたはスプライト画像)
②canvasに投影する。RGBを投影するcanvas、アルファチャンネルを投影しマスクするcanvasの2種を用意する
あなたの回答
tips
プレビュー
