アニメ、映画同時視聴のためのChrome拡張開発②

アニメ、映画同時視聴のためのchrome拡張「StreamSync」開発

前回の記事はこちら
StreamSync – アニメ、映画同時視聴のためのChrome拡張開発① | ひとりごと2.0

開発中のレポジトリはこちら

今回のお題

Youtubeのサイト上で再生されている動画を、Javascriptで制御する

Youtubeのばあい

const video = document.getElementsByClassName('video-stream html5-main-video')&#91;0];

// 再生
video.play();

// 一時停止
video.pause();

// 再生地点の取得
video.currentTime;

// 10秒進む
video.currentTime += 10;

// 10秒戻る
video.currentTime -= 10;

// シーク（例：１分地点）
video.currentTime = 60;

document.getElementsByClassName('video-stream html5-main-video')[0]; で、現在再生されているyoutube動画のvideoタグを取得する。

videoタグはhtml5で登場した新しいタグだが、videoタグには便利なメソッドが色々実装されている。play(), pause()など
videoタグ自体はオープンな規格なのでyoutube以外のサイトでもvideoタグが取得できれば同様の形で操作できる・・・はず。

試しにChromeでyoutubeの動画を開き、右クリックから「検証」でdevtoolを起動する。
consoleタブに移動して上記のコードを実行してみると、動画を操作することができる。

Netflixのばあい

netflixの場合は、youtubeのようにvideoタグから操作しようとするとエラーが吐かれる。
netflix独自のAPIを使うのが得策のよう。

const player = netflix.appContext.state.playerApp.getAPI().videoPlayer;
const sessionId = player.getAllPlayerSessionIds()&#91;0];
const video = player.getVideoPlayerBySessionId(sessionId);

// 再生
video.play();

// 一時停止
video.pause();

// 再生地点を取得
video.getCurrentTime(); // ミリ秒を返す

// シーク（例：１分地点）
video.seek(60000);

使いみち

StreamSyncでは、ホスト（すなわち同時視聴配信の配信主）とクライアント（視聴者）が見る動画の再生タイミングを同期するのが主要機能となる。
よってブラウザで再生中のyoutube、netflix、amazon primeなどのストリーミング動画の再生地点の取得とシークをプログラマブルに制御することが肝になってくる。

いま開発中のStreamSyncではこのあたりで使っている。
streamsync/stream.js