VIDEO COPILOTのTutorialプレビュー機能を真似てみる

2012/01/16
(この記事の文字数: 585)

After EffectsのTutorialが満載のサイトVIDEO COPILOTのTutorialページの各Tutorialにカーソルを載せると自動でTutorialのプレビュー動画が流れる機能がずっと前から便利だなぁと思っていて、自分のサイトでも取り入れたいと思っていました。

今日、サイトのソースを見させてもらいながら仕組みを調べてみたんですが、Javascriptだけで簡単に実装できそうだったので、真似ながら試行錯誤していたら、とりあえず音楽のプレビュー機能として同じようなものが作れました。

画像にカーソルを載せるとプレイヤーが現れてカーソルにくっついてきます。その間、プレビュー用の音楽が再生されるという機能です。

MusicページのWorksにてすでに機能していますので、興味のある方は試してみて下さい。

激しく動きまくったりすると結構落ちたりするので優しくお願いします。何度か試してChromeとFirefoxは一度も落ちなかったんですが、IEは落ちることがあったのでご注意を。

やっぱりWebのプログラミングは簡単に目に見える成果が出るのでおもしろいです。修士論文からの現実逃避はこのくらいにしときます。

-------------------------------------
追記
ブラウザごとで音楽プレイヤーの埋め込みタグを分けたら安定して落ちなくなりました。