ＥＣショップでもリアル店舗同様にショッピングは楽しくあるべきです、ですから個人的には楽しみながら買い物ができる動画をどんどん作っていきたいなと思っています。

そこで今回は商品にカラーバリエーションがある場合に、楽しんで買い物ができそうな動画の設置方法を考えてみました。

まずはdemoをみて下さい。

demo

「color」をクリックするとボールの色が変わります。

これをアパレルの商品動画に応用したら面白いかなと思います。リアル店舗にはないＥＣショップならではの買い物の楽しみ方ができるのではないでしょうか。

では設置の方法をすこし解説します。

仕組みは実は結構単純です。端的にいうと2種類の動画作って入れ替えているだけ、実はそれだけです。

videoタグで２つ動画を埋め込みます、片方の動画をpositionで浮かせて２つの動画を重ねます。ここで必須の条件としては使用する２つの動画の尺は全く同じにする必要があります。

videoタグのコントロールでは2つの動画を同時に動かせないので、再生・停止はjsで行います

再生・停止用のボタンを設置します。

これで２つの動画が同時に再生・停止されます。

さらにpositionで上に乗っている動画を表示・非表示にするボタンを作ります。

フェイドで表示・非表示にすると切り替わる際の違和感が少なくなると思います。

あとはサイズを整えて完了です。