今日も色々やりましたが、寝るまで時間がない(特別用がないときは12時に寝る)ので、やったものの中で簡単に書けそうなものをば。
動画を透過して重ね合わせて比較したい！という声を聞いたので、実装。

もともと縦に2つ動画を並べた動画比較機能は実装していたので、動画を透過させて動かすだけ。

動かす！

jQuery UI Touch punchを使いました。
前回に引き続き、ちょい仕様を足すもにはやはり便利だなと。
スマホだと動きがややスムーズではないものの(都度座標計算してるからなぁ)、とりあえず動画は動かせるように。

$('.video_comparison_background video').draggable({containment:"window"});

書いたコードはこれだけ。

透過！

次は透過。
動画プレイヤーの方はボタンが詰まっていて隙間がなかったので、空いていた右上に透過ボタンを配置。
(影響を受けるのは下の動画だけなので、上にボタン配置微妙だなぁ。)
透過ボタンもアイコンにしようかと思ったんですが、わかりやすい透過のアイコンがなかったので文字に。
白黒を基調にやや「透過」っぽいデザインにしました。 

このボタン(labelタグ)とcheckbox型のinputタグを紐づかせ、このボタンをタッチするとcheckboxにcheckがつき、疑似要素:checked ~ video:nth-child(2) のセレクタで2番目の動画のopacityが0.5になるようにしました(本当はセレクタもうちょい複雑)。

.video_transparent_checkbox:checked ~ div:nth-of-type(3) video{
   opacity:0.5;
}

CSSだけでうまくいくと嬉しい！

Next !

実際に使ってみてわかったのは、比較のために動画の拡大縮小が必要だなということ。
あとは重なり過ぎちゃうと動画比較しづらいので、横か縦にずらして使うことが多いため、windowからはみ出てもOKな仕様でもいいかな。
ピンチでズーム機能も少し手出したので、それも完成したらnoteに書きまする。
2本指タッチでイベント発火させて、最初の2指の距離を保存して、変わっていくその2指の距離に比して、videoの拡大/縮小させるだけ！