【ティラノスクリプト】動画をmix-blend-modeで重ねて表示してみる

========================================

[layermode_movie]　レイヤーモード動画

http://tyrano.jp/tag/#layermode_movie

動画の合成はver4.50以降で公式に実装されました。以下は古い情報になりますのでご注意ください。

========================================

f:id:onigirimgmg:20170205180007p:plain

DEMO（「動画×mix-blend-modeテスト」を選択）

CSSのmix-blend-modeプロパティを使用して、動画をちょっといい感じに表示してみたいと思います。

developer.mozilla.org

いろんなやり方がありますが、今回は[movie]タグにblendというパラメータを追加して、CSSでmix-blend-modeを指定できるようにしています。

例によって本体を改造してるので自己責任でお願いしますー。

tyrano/plugins/kag/kag.tag_ext.js

tyrano.plugin.kag.tag.movie = {
vital: ["storage"],
pm: {
storage: "",
volume: "",
skip: "false",
bgmode: "false",
loop: "false", //ここのカンマ忘れずに
blend: "" //追加
},
（中略）
var j_video = $(video);
if (pm.blend != "") j_video.css("mix-blend-mode", pm.blend); //追加
（中略）
};