アバター全員が同じ動画を視聴する仕組み作り

日付:

Second Lifeの中で動画再生する方法はありますが、アバター全員が動画を同時に同じ再生位置を視聴する方法がありません。（たしか無いと思う）

DANCE CLUB Gracefulでは以下の方法を使って、同じ動画を見れる仕組みを作りました。
LSLやHTML、JavaScriptが得意な方であれば作れると思います。

Second Lifeの中でよくある動画再生の方法

動画再生する方法は4種類ある

1つ目、マーケットプレイスやストアでテレビジョンやスクリーン系のアイテムを買って、土地に置いて、動画サイトのURLを設定する方法
2つ目、プリムにLSLでメディアの面を用意して動画サイトのURLを設定する方法
3つ目、土地のメディアを有効にして「ウェブページ」で動画サイトのURLを設定し、該当テクスチャ上で再生する方法
4つ目、土地のメディアを有効にして「ムービー」で動画を設定し、該当テクスチャ上で再生する方法

動画サイトのURLに「自動再生」のパラメータがあって設定しておけば、アバターが近づいたときに自動的に動画が再生されます。

Second Lifeの「共有メディア」だとアバター毎に再生位置がずれる

アバターが近づいたり、メディアが許可されると以下のような仕組みで再生されます。
  1. 該当の面にブラウザコントロールが読み込まれます。
  2. 設定しているURLのウェブページが読み込まれます。
  3. ウェブページ上の動画プレイヤーが動きます。自動再生やループが設定されていれば、再生や繰り返しがされます。

これでアバターが動画を見れるのですが、アバター毎に上記の処理が動きます。これでは「今、動画のX秒目を再生している」といった時間軸の管理ができていません。

そのため、アバター毎に再生開始や再生位置が異なります。みんなで動画を見ながら、内容についてチャットしたり、ダンスすることが出来ません。


Gracefulで行っている同時視聴の仕組み

Gracefulでは動画はYouTubeの埋め込み、動画再生は「共有メディア」を使っています。以下のような同時視聴の仕組みを用意しました。

構成

プリム2つ、コントロール部分とスクリーン部分に分けてます。（混ぜて１つのプリムにしても問題ないです）

コントロールのプリム

Gracefulだと「TOUCH DACNE」と描かれたボードがそれになります。

時間軸を管理していて、動画やダンスの開始、終了の指示を出しています。タイマーを1秒刻みで動かしていて、指定時間が経過したら、次のダンスや動画に切り替えてます。

スクリーンのプリム

動画を再生する部分です。プリムの1面をLinkMediaで共有メディア面にして、ウェブページを読み込んでいます。

コントロールのプリムからスクリーンのプリムへの操作

プリム間の通信のため、LSLのsayとlistenで通信しています。

スクリーン上の共有メディア面のウェブページ（YouTubeを再生する部分）

YouTubeのURLをそのまま指定しているのではなくて、後述のHTMLファイルを用意しています。

再生位置を同期して動画を同じタイミングにする方法

YouTubeをそのまま再生しても、テレポートしたときに再生開始するので、見てる人によって再生位置がずれてしまいます。以下の方法を用意しました。

時間軸をLSLのタイマーで管理する

コントロール部分でLSLの1秒ごとのタイマーと動画秒数を保持する変数を用意します。動画再生を始めたら、カウントします。

これでLSL側で「動画のX秒目」が分かります。スクリーン部分に対して毎秒毎に「動画のX秒目」という指示をかけてます。


YouTubeの埋め込みプレイヤーの再生を制御するAPIがある

YouTubeは埋め込みプレイヤーを操作できるAPIがあります。操作するためのメソッドや状況が分かるプロパティがあります。

iframe 組み込みの YouTube Player API リファレンス

YouTubeの再生や制御する部分のHTMLファイルを用意する

YouTubeのURLを直接指定すると前述のAPIで操作できないです。なのでウェブスペースに以下の内容を含むHTMLファイルを用意します。

  • YouTube動画プレイヤーの埋め込み
  • JavaScriptの操作部分（YouTubeのAPIを使う部分）
  • LSLから指示来た時の対応する仕組みの部分
スクリーンのメディア面はこのHTMLファイルを読み込んでいます。

LSLからYouTubeのseekToを操作する

LSLからYouTube Player APIのplayer.seekTo関数を操作するのですが、どのように通信するかを考える必要がありました。

Gracefulでは複雑なことをしたくなかったので、URLのハッシュ(#～) を使いました。動的なサーバー(PHPとか)は不要で、HTMLとJavaScriptだけで作れるようになりました。

LSLのタイマーで1秒ごとに共有メディアのURLを書き換えます。ハッシュ部分にseekというパラメータを用意して秒数を置いておきます。

(例)

https:// ～ /player.html#seek=10
https:// ～ /player.html#seek=11
https:// ～ /player.html#seek=12

ハッシュを変えるだけなら共有メディア上のHTMLファイルは再読み込みしません。JavaScriptで受ければplayer.seekTo関数の操作ができます。

Window: hashchange イベント

URLのハッシュが変わったことはhashchangeイベントでキャッチできます。

hashchangeイベントがあったら、ハッシュにあるseekパラメータの秒数を取得します。YouTube埋め込みプレイヤー上の状態や再生位置を判定して、必要な処理をします。

再生位置があっている：そのまま再生を続行する
再生位置がずれている：seekTo関数で再生位置を直す
再生していない：再生を開始してseekTo関数で再生位置を合わせる


めちゃ長文になりましたが、上に書いた仕組みになります。

Second Lifeの中で動画を使った楽しい仕組みが増えることを願ってます。ぜひチャレンジしてみてください。