Second Lifeの中でよくある動画再生の方法
動画再生する方法は4種類ある
Second Lifeの「共有メディア」だとアバター毎に再生位置がずれる
- 該当の面にブラウザコントロールが読み込まれます。
- 設定しているURLのウェブページが読み込まれます。
- ウェブページ上の動画プレイヤーが動きます。自動再生やループが設定されていれば、再生や繰り返しがされます。
これでアバターが動画を見れるのですが、アバター毎に上記の処理が動きます。これでは「今、動画のX秒目を再生している」といった時間軸の管理ができていません。
そのため、アバター毎に再生開始や再生位置が異なります。みんなで動画を見ながら、内容についてチャットしたり、ダンスすることが出来ません。
Gracefulで行っている同時視聴の仕組み
構成
コントロールのプリム
Gracefulだと「TOUCH DACNE」と描かれたボードがそれになります。
時間軸を管理していて、動画やダンスの開始、終了の指示を出しています。タイマーを1秒刻みで動かしていて、指定時間が経過したら、次のダンスや動画に切り替えてます。
スクリーンのプリム
コントロールのプリムからスクリーンのプリムへの操作
スクリーン上の共有メディア面のウェブページ(YouTubeを再生する部分)
再生位置を同期して動画を同じタイミングにする方法
時間軸をLSLのタイマーで管理する
コントロール部分でLSLの1秒ごとのタイマーと動画秒数を保持する変数を用意します。動画再生を始めたら、カウントします。
これでLSL側で「動画のX秒目」が分かります。スクリーン部分に対して毎秒毎に「動画のX秒目」という指示をかけてます。
YouTubeの埋め込みプレイヤーの再生を制御するAPIがある
YouTubeの再生や制御する部分のHTMLファイルを用意する
YouTubeのURLを直接指定すると前述のAPIで操作できないです。なのでウェブスペースに以下の内容を含むHTMLファイルを用意します。
- YouTube動画プレイヤーの埋め込み
- JavaScriptの操作部分(YouTubeのAPIを使う部分)
- LSLから指示来た時の対応する仕組みの部分
LSLからYouTubeのseekToを操作する
LSLからYouTube Player APIのplayer.seekTo関数を操作するのですが、どのように通信するかを考える必要がありました。
Gracefulでは複雑なことをしたくなかったので、URLのハッシュ(#~) を使いました。動的なサーバー(PHPとか)は不要で、HTMLとJavaScriptだけで作れるようになりました。
LSLのタイマーで1秒ごとに共有メディアのURLを書き換えます。ハッシュ部分にseekというパラメータを用意して秒数を置いておきます。
(例)
URLのハッシュが変わったことはhashchangeイベントでキャッチできます。
hashchangeイベントがあったら、ハッシュにあるseekパラメータの秒数を取得します。YouTube埋め込みプレイヤー上の状態や再生位置を判定して、必要な処理をします。
めちゃ長文になりましたが、上に書いた仕組みになります。
Second Lifeの中で動画を使った楽しい仕組みが増えることを願ってます。ぜひチャレンジしてみてください。