Blog

EC向け動画:クリックで色が変わる動画

2015.06.03Cat:Blog EC video デザイナー

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

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

まずはdemoをみて下さい。

demo

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

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

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

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

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

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

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

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

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

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

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

Author Profile

  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ