BiNDでムービーを特殊再生する

| HOME | BiNDでムービーを特殊再生する |

更新日 2009-05-24 | 作成日 2007-12-16

BiND for WebLiFEでムービーを特殊再生する

BiND for WebLiFE.png 　このサイトは BiND for WebLiFEで作成しています。BiNDの動画パーツを使えば簡単にムービーを表示する事ができるのですが、ループ再生したりパリンドローム（再生、逆再生を繰り返す）で再生する事ができません。
　このサイトでは、どうしてもムービーをパリンドロームで再生したかったので、カスタムタグを使って実現しています。

カスタムタグを使う

　BiNDが標準でサポートしていない機能を実現するには、ブロックエディタの編集エリアに入力したテキストにスタイルとして「HTMLタグ」を指定するか、あるいは「カスタムタグ」パーツを挿入して、パーツの中にHTMLを記述するかのどちらかになります。
　どちらがよいかですが、私はカスタムタグを使っています。カスタムタグは、保存しておいて後で呼び出す事ができるため同じ HTMLを使い回すのに便利だからです。

パーツを挿入する

　まずムービーを表示したい場所にカスタムタグパーツを挿入します。
　カーソルを挿入したい場所に移動してから、ブロックエディタ右側のパーツ一覧の中にある「カスタムタグ」ボタンをクリックすればカスタムタグパーツが挿入されます。
　挿入されたカスタムタグパーツをクリックして選択すると、ブロックエディタ右側がカスタムタグパーツ設定に変わります。一番下にHTMLソース：と書かれたテキストフィールドがありますので、そこに以下のHTMLコードを打ち込みます。

　ここでアンダーラインを引いた部分は適宜変更して下さい。
　サイズが500x500のムービーの場合、width="500" height="516"とします。高さが500ではなく516になっているのは、コントローラの高さ16を足した為です。
　yourMovieの部分は表示したいムービーのファイル名に変更して下さい。このムービーファイルは_userdataという名前のフォルダの中に入れておく必要があります。
　また編集しているページと _userdataフォルダの階層構造を意識してパスを指定する必要があります。編集しているページがトップ階層よりも一つ下にある場合は"../_userdata/yourMovie.mp4"となります。

　ややこしくて全く初心者向きではありませんね。やりたい事はパリンドローム再生だけなのですが・・・
　BiNDの動画パーツがループ再生やパリンドローム再生に対応してくれれば、こんな面倒な事を考えなくても済みます。将来のバージョンでは対応してくれるとよいのですが。

サイトのフォルダ名

　_userdataフォルダはBiNDで作成したサイトのフォルダの中にあります。サイトのフォルダ名はコーナー設定のディレクトリ名で指定した名前です。
　ディレクトリ名を設定するには、まずサイトエディタの左側にあるサイトマップで一番上を選択します。
　この状態でウィンドウ下部の設定ボタンを押すと、シートが表示されます。コーナー設定に切替えます。
　シートの右上にディレクトリ名を入力するテキストフィールドがあります。

サイトのフォルダがどこにあるのか

　各サイトのフォルダはMyBiND_Sitesフォルダの中にあります。MyBiND_Sitesフォルダの場所はBiNDの環境設定で指定します。デフォルトの場所は書類フォルダの中のDIGITANSTAGEフォルダの中です。

参考文献

　ムービーを表示するHTMLに関しては、以下のWebページを参考にしました。loop, autoplay, controller, playeveryframeなどの意味とセットできる値については3に詳しく載っていますので、そちらを参照して下さい。