お久しぶりです、火頭です。
YouTubeの動画でジャズスタンダードのバッキングトラックを流してアドリブ練習って誰でもするじゃないですか? で、ツーコーラスくらいで終わる動画だと3、4分くらいしかアドリブできないじゃないですか? でマウスのカーソルをシークバー開始位置に置いといていちいちクリックして頭出ししたりするじゃないですか?
メンドクサイわ、って話です。
まぁ20分くらい繰り返してくれる動画もあるんですが、バッキングが気にいらなかったり、キーが合わなかったりで、良い動画って貴重なんですよね。で、これが4分くらいの動画だと、あああああ!!ってなるわけです。
で、ループ再生してくれる拡張機能を作りました。
YouTubeのapiは不思議なもので、ページの埋め込み動画に関するapiは豊富に用意されているのですが、本家ページで操作できることはかなり少ないのです。イタズラされるのが怖いのかしらん。
私などは本家ページが大好きなものですから、埋め込みでの機能が豊富でも嬉しくない。そして本家ではループ再生用のapiが用意されてないので、自分でムリヤリやるしかないわけです。そういえばつべのプレイヤーの機能って結構進化してますよね、気づけば再生速度が変えられたり。もしかしたらそのうちループ再生も実装されるかも知れません。←動画を右クリックでループ再生を選べました 笑。
ふん、まぁせっかく自前で用意するのだから本家がやらないこともやります。
まず、動画の最初って余白みたいなもので、自分の宣伝や、曲名をドデーンと写したり、無駄な部分が多い、同じく動画の最後も「よかったら私のサイトに来てね!」的なものだったりする。
そこでループ再生の開始位置を10秒まで、終了位置を20秒まで調整できるようにしました。要するにあまり凝っていない部分再生的なものです。
実装に関しては、結構無茶しています。用意されている関数で出来ることは...
・動画の長さ(時間)を取得
・再生中の動画の現在の位置を秒数で取得
・シーク機能
・プレイヤーの状態を取得
など。
ループさせるには、動画の再生位置を見張り、指定した位置(ループ終了位置)を超えたらループ開始位置にシークで戻る。これだけ。
でもどうやって見張るんだ?ってお話。最初は、プレイヤーの状態を取得できるので、再生が終了したら状態が変わるから、それをトリガーにすれば?と思ったのですが、それだと動画を最後まで見ることになり、邪魔な宣伝部分をカットできないので却下。
仕方なくタイマー機能的なものに頼ることに、なんか負荷がかかりそうで嫌なんですけどね。自分のサイトでなにかしら描画するのに使っている window.requestAnimationFrame()
という関数に頼りました。これをいじって1秒ごとに動画の現在再生位置を取得し、ループ終了位置と見比べる感じです。
以上、ループ終了機能はつけていないのでほうっておくと永遠ループするのでご注意。