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に,エラーに応じたメッセージが表示されていると思います.
最後まで読んでいただきありがとうございまいた.