YouTube Player APIの使い方 – プレイヤーの動作を制御する篇

YouTubeのIFrame Player APIを使ったプレイヤー埋め込みに対して、任意の処理を加えていきます
YouTubeプレイヤー部分を利用するのではなく、独自のボタンを配置して、再生や停止、早送りを実装します

下記の動画に対して制御していきます

状態表示:


単語をクリックすると動画の制御ができます

・再生
・一時停止
・30秒早送り
・30秒巻き戻し
・次の動画へ
・前の動画へ

制御する部分の記述は

JavaScriptは下記になります

早送りと巻き戻しに関しては
getCurrentTime()で現在の再生位置が取得できるので、その位置を元に30秒加算・減算してseekTO()で移動させているだけです

これでYouTubeのIFrame Player APIを使ったプレイヤーの基本的な制御はできます
JavaScriptを使うといっても複雑な処理をしないといけないわけではないので使いやすいAPIです

また、JavaScriptを使うことによるメリットも大きいです
画面サイズに合わせてレスポンシブの処理を入れたいときはCSSで切り分けたりしますが、JavaSciptでブラウザサイズを簡単に取得できるので、その値を元に算出し、プレイヤーの準備の時に初期サイズを設定し、画面サイズを変更された場合もJavaScriptで挙動を取得してサイズを設定しなおせばいいだけです