0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

YouTube IFrame APIでのエラーコード取得方法

Last updated at Posted at 2024-11-15

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()関数

  1. onYouTubeIframeAPIReady():YouTube APIが読み込まれると呼ばれる

  2. new YT.Player:YouTubeプレーヤーを作成するためのオブジェクト

  3. videoId:埋め込む動画のIDを任意で記入

2.3. onPlayerError(event)関数

  1. onPlayerError:エラー発生時にeventオブジェクトを受け取る
  2. event.data:エラーの種類を判別
  3. switch:エラーの種類によってメッセージをコンソールに出力

3. まとめ

CodePenなどで上記のコードを貼り付けてみてください.
Consoleに,エラーに応じたメッセージが表示されていると思います.

最後まで読んでいただきありがとうございまいた.

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?