YouTube IFrame APIが提供するエラーコードを取得し,エラーの種類によってエラーメッセージを出力する例を紹介します.
1. YouTube IFrame APIでのエラーコードの取得方法
YouTube IFrame APIでは,エラーが発生するとonErrorイベントが呼び出され,event.dataとしてエラーコードが取得できます.
(その値によりエラーの種類が判別できます)
エラーコード一覧
-
2: リクエストが無効 -
5: HTML5プレーヤーのエラー -
100: 動画が見つからない -
101: 埋め込み再生が許可されていない -
150: 埋め込み再生が許可されていない(101と同じ意味)
2. 実装例
2.1. コード全体
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YouTube IFrame API Example</title>
<script src="https://www.youtube.com/iframe_api"></script>
</head>
<body>
<div id="player"></div>
<script>
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: '動画IDをここに挿入',
events: {
'onError': onPlayerError
}
});
}
function onPlayerError(event) {
console.error('Player error code:', event.data);
let errorMessage = '';
switch (event.data) {
case 2:
errorMessage = '無効なパラメータです';
break;
case 5:
errorMessage = 'HTML5プレーヤーのエラーです';
break;
case 100:
errorMessage = '動画が見つかりません';
break;
case 101:
case 150:
errorMessage = 'この動画は埋め込み再生が許可されていません';
break;
default:
errorMessage = '不明なエラーが発生しました';
}
console.error('Error message:', errorMessage);
}
</script>
</body>
</html>
2.2. onYouTubeIframeAPIReady()関数
-
onYouTubeIframeAPIReady():YouTube APIが読み込まれると呼ばれる -
new YT.Player:YouTubeプレーヤーを作成するためのオブジェクト -
videoId:埋め込む動画のIDを任意で記入
2.3. onPlayerError(event)関数
-
onPlayerError:エラー発生時にeventオブジェクトを受け取る -
event.data:エラーの種類を判別 -
switch:エラーの種類によってメッセージをコンソールに出力
3. まとめ
CodePenなどで上記のコードを貼り付けてみてください.
Consoleに,エラーに応じたメッセージが表示されていると思います.
最後まで読んでいただきありがとうございまいた.