【js】Webサイトに埋め込んだYouTubeの動画IDをボタンクリックなどで変更する方法
YouTubeのiframeのAPIを使ってWebサイトにプレーヤーを埋め込む方法については、公式リファレンスにサンプルコードがそのまま載ってます。
iframe 組み込みの YouTube Player API リファレンス | YouTube IFrame Player API | Google Developers
が、再生する動画を動的に変更したい、例えば、
・サーバから再生する動画のIDを読み込んで、それを再生したい
・ボタンを押すと動画が変わるようにしたい(テレビのリモコンのように)
とかを実現しようと思うと、公式リファレンスのそのままコピペが使えず、ちょっと手を入れてあげる必要がありますので、メモ程度に書いておきます。
備忘メモ
まずはサーバ等から動画IDを取得し、それを引数にしてプレーヤーを生成する方法の一例。
var vId; //画面ロード時に動画IDの読み込み処理を行う window.onload = function(){ loadVideoData(); } //動画情報ロード function loadVideoData() { //1.コールバックでプレイヤーの読込を呼ぶとか dataManager.load(function() { loadPlayer(vId); }); //2.普通に読み込み > プレイヤー呼び出しするとか vId = dataManager.load(); loadPlayer(vId); } //プレイヤーの生成 function loadPlayer(v_Id) { //プレイヤー生成 player = new YT.Player('player', { height: '360', width: '640', videoId: v_Id, events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); }
こんな感じ。
公式リファレンスのサンプルだと、「2」のAPIのコードのダウンロードが完了した瞬間にプレーヤーの生成が行われてしまい、動画IDをセットしてあげている暇がないので、「3」の部分を丸々削除して、自分でプレイヤーの生成を呼ぶようにしてあげることで、任意の動画IDを指定してプレーヤーを埋め込むことができます。
次、ボタンクリックとかで動画を切り替える方法。
function onClickButton(){ setVId(); playNewVideo(); } function playNewVideo() { player.clearVideo(); player.loadVideoById(vid); player.playVideo(); }
こんな感じ。
clear > load > play というシンプルな流れですね。
終わり。