エラー対応

Classic/VPC環境で利用できます。

再生中に発生するエラーを検知し、処理する方法について説明します。

参考

Video Player Enhancementサービスと一緒に Media Analyticsサービスを利用すると、Media Analytics管理ページでエラーコードを簡単に確認できます。

エラーイベント検知

プレイヤーを呼び出す関数で player.on("error", (err) => {})コードにてイベントを検知し、エラーコードとメッセージを呼び出すことができます。

参考

エラーコードは Video Player Enhancementサービスで提供するエラーコードリストで転送します。

const player = new ncplayer("video", {
  playlist: [
    {
      file: "http://example.com/myVideo.mp4",
      poster: "http://example.com/myVideoThumb.png",
    },
  ],
});

// errorイベントのデータ構造:
// {
//   errorCode: string | null,     // 例: "E0001"、"E0004"
//   errorMessage: string | null,  // エラーの説明
//   errorTitle: string | null,    // エラーのタイトル
// }

player.on("error", function(err) {
  var errorCode = err.errorCode;
  var errorMessage = err.errorMessage;
  var errorTitle = err.errorTitle;

  switch (errorCode) {
    case "E0001":
      console.log("E0001 - ACCESS DENIED");
      console.log(errorTitle, errorMessage);
      break;
    case "E0002":
      console.log("E0002 - NOT AUTHORIZED");
      console.log(errorTitle, errorMessage);
      break;
    case "E0003":
      console.log("E0003 - NETWORK ERROR");
      console.log(errorTitle, errorMessage);
      break;
    case "E0004":
      console.log("E0004 - CANNOT PLAY");
      console.log(errorTitle, errorMessage);
      break;
    case "E0005":
      console.log("E0005 - LICENSE IS INVALID");
      console.log(errorTitle, errorMessage);
      break;
    case "E0006":
      console.log("E0006 - LIMIT DENIED");
      console.log(errorTitle, errorMessage);
      break;
    default:
      break;
  }
});

再試行設定

プレイヤーがエラーにレスポンスするまでの最大再試行回数と最大遅延時間の設定をカスタマイズできます。

参考

プレイヤーのリセット時に動画再生試行を追加: デフォルト値では最大3回、5秒間隔
Live/VODが中断された際の再生試行を追加: デフォルト値では最大3回、5秒間隔

const player = new ncplayer("video", {
  playlist: [
    {
      file: "https://CDNドメイン/example.m3u8",
      poster: "https://CDNドメイン/poster.jpg",
    },
  ],
  retry: {
    maxRetry: 10,   // 最大再試行回数
    interval: 5000, // 再試行1回当たりの遅延時間(ms)
  },
});

オプション	タイプ	デフォルト値	説明
`retry`	Object	-	再試行設定
`retry.maxRetry`	Integer	`3`	最大再試行回数
`retry.interval`	Integer	`5000`	再試行による遅延時間(ミリ秒)

エラー画面のオーバーライド

基本的に提供されるエラー画面を顧客企業が希望するコードに変更して実行できます。エラー画面をオーバーライド(override)すると、最後の再生位置で停止(pause)ステータスを維持したままプレイヤーオーバーレイでエラー画面を表示できます。

// 動画(MP4)
const player = new ncplayer("video", {
  playlist: [
    {
      file: "https://CDNドメイン/example_video_01.mp4",
      poster: "https://CDNドメイン/example_image_01.png",
    },
  ],
  override: {
    error: function(err) {
      console.log("player error:", err);

      // 顧客企業のエラー画面機能の実装
      // 例: document.getElementById("error-overlay").style.display = "block";
    },
  },
});

エラーコード

Video Player Enhancementサービスが提供するエラーコードリストは、次の通りです。

エラーコード	エラーメッセージ	説明
E0001	ACCESS DENIED	不正なアクセス。不正なオプション値が渡されたため、動画再生不可
E0002	NOT AUTHORIZED	動画を再生する権限がない。不正なリクエストにより、プレイヤーの認証に失敗
E0003	NETWORK ERROR	ネットワークの状態が不安定。ネットワークの問題により、プレイヤーの認証に失敗
E0004	CANNOT PLAY VIDEO	動画を再生できない。動画再生に失敗
E0005	LICENSE IS INVALID	ライセンスが無効。プレイヤーのライセンスが期限切れのため、動画再生不可
E0006	LIMIT DENIED	月間の基本提供呼び出し数を超過。無料プレイヤーの月間提供量をすべて使い果たしたため、動画再生不可

全 HTMLのユースケース

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>VPE Player - エラー対応</title>

  <!-- hls.js / dash.jsを VPEスクリプトよりも先にロード -->
  <script src="https://player.vpe.naverncp.com/lib/js/hls.min.js"></script>
  <script src="https://player.vpe.naverncp.com/lib/js/dash.all.min.js"></script>
  <script src="https://player.vpe.naverncp.com/v2/ncplayer.js?access_key=YOUR_ACCESS_KEY"></script>
</head>
<body>
  <div id="video" style="max-width: 800px; margin: 0 auto;"></div>

  <div id="error-overlay" style="display:none; color:red; text-align:center; padding:20px;">
    <h2>再生エラーが発生しました</h2>
    <p id="error-detail"></p>
  </div>

  <script>
    const player = new ncplayer("video", {
      playlist: [
        {
          file: "https://CDNドメイン/example_video_01.mp4",
          poster: "https://CDNドメイン/poster.jpg",
        },
      ],
      retry: {
        maxRetry: 5,
        interval: 3000,
      },
      override: {
        error: function(err) {
          document.getElementById("error-overlay").style.display = "block";
          document.getElementById("error-detail").textContent =
            err.errorCode + " - " + err.errorMessage;
        },
      },
    });

    player.on("error", function(err) {
      console.log("エラー発生:", err.errorCode, err.errorMessage);
    });
  </script>
</body>
</html>