2014.07.02

 

今回は、自作のMuseウィジェットをご紹介。

ブラウザ幅に合わせてフルスクリーンで表示され、動画がループで流れているおしゃれなサイト。
最近増えてますね。

あれを簡単にMuseでもつくりたい、と

ウィジェット共有サイト Adobe Add-ons に訪れると、

現在下記の動画背景ウィジェットがありました。

Widthy　＄7.99

高い。自分でつくるしかない。


ということで、プログラミングができない私ですが、できる人監修の元つくってみた。
上記ウィジェットには初期搭載されているフィルターの設定等は手間がかかりそうだったので、

ひとまずは基本的なものを。
無料で配布いたします。　※ 転売は固く禁じます



《 使用方法 》
1. ダウンロード：Background Video（Adobe Add-ons）　もしくは　Widgetsページ
2. Back Ground Video.mulib を「ライブラリパネル」から読み込み

3. Back Ground Videoフォルダ内のBack Ground Videoをページ上にドラッグ＆ドロップ

4. オプションパネルのそれぞれの項目に動画＆画像データのファイルパスを指定

5. ウィジェットを最背面に配置（配置場所はどこでも大丈夫です）

 

​

Back Ground Videoウィジェットを使用したサンプルサイト
ナニワのシンセ界公式サイト| http://naniwa.modularsynth.jp/



《 動画形式 》
各ブラウザによって対応している形式が異なるため、それぞれにあわせて素材を用意する必要があります。
動画形式について| 【HTML5】各デバイス・ブラウザごとの動画再生環境調査

IE8はビデオ表示に対応していないため、画像として読み込めるように Poster Source の項目に画像を設定してください。

WebM、OGGへの変換方法ですが、わたしはいまのところ VLC media player を使ってます。
もっといい方法がありそうですが。

 


ウィジェットの作成方法はこちら

​| Creating a Muse Configurable Options Widget