どもです。
職場の乾燥具合に驚いた餅。です。
まぁ一日中パソコン起動させてるような職場ですし、湿度高くても問題そうですが…
さて、今回はYouTube Player APIについて。
先日、サイトにyoutube動画を貼り付けるという依頼がありました。
その際の条件は「関連動画は表示しない」というものだけだったので、
という方法で導入しました。
が、
今回、「音量は初期ミュートで」と言われてしまいまして、しかし最もシンプルなこの貼り付け方では初期ミュートは対応できないそうです。
さて困った、と思っていましたら、ちゃーんと公式サポートがあるんですね。YouTube Player APIというjsを積めば複雑な注文にも対応してくれるとのことでした。
使い方としましては、こちらのサイト様が良い感じに日本語訳してくれているので参考にするのが良いかと。
但し、例文をコピペしただけだと、1ページに複数の動画を置いてくれません。
ので、やり方を変更です。
まずはヘッドにjsを読み込みます。
で、次はjsのユーザー記載部を編集するのですが…
var 動画1（任意半角名称）
var 動画2（任意半角名称）
var 動画3（任意半角名称）
function onYouTubeIframeAPIReady() {
動画1（任意半角名称） = new YT.Player('動画1（任意半角名称）', {
height: '315',
width: '560',
videoId: '動画1のID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
}
});
動画2（任意半角名称） = new YT.Player('動画2（任意半角名称）', {
height: '315',
width: '560',
videoId: '動画2のID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
}
});
動画3（任意半角名称） = new YT.Player('動画3（任意半角名称）', {
height: '315',
width: '560',
videoId: '動画3のID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
playerVars: {
"rel":0, // 関連動画の有無(default:1)
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.mute();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
// if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
// done = true;
// }
}
function stopVideo() {
player.stopVideo();
}
</script>
ポイントは、function onYouTubeIframeAPIReady()の中に読み込む動画全ての情報を記載することです。
複数function onYouTubeIframeAPIReady()を立ち上げるとバグるので注意です。
これで、動画を貼り付けする部分に
などとそれぞれ記載すれば完了です。