ApsaraVideo VOD:Player SDK for Web の FAQ

ライセンス関連の問題

無効または期限切れのライセンスの問題については、「ライセンスに関する FAQ」をご参照ください。

Player SDK for Web のライセンス設定と権限付与されたドメイン名

Player SDK for Web は、プレーヤーをホストする Web ページのドメイン名に対してライセンスを検証します。この項目では、権限付与されたドメイン名の設定、初期化中のライセンスエラーの処理、SDK のアップグレード時のライセンス設定について説明します。

• 権限付与されたドメイン名：権限付与されたドメイン名は、プレーヤーをホストする Web ページのビジネスアクセスドメイン名であり、ApsaraVideo VOD のリソースドメインではありません。ドメイン名は完全一致またはワイルドカードマッチングでバインドします。テストドメイン名と本番ドメイン名は同じ方法で設定します。コンソールで各ドメイン名の所有権検証を完了し、その後、無料のライセンスを申請してください。

• 初期化中の license resource init error：このエラーは通常、デバッグモードが有効な場合 (たとえば vconsole が有効な場合) に発生します。通常の再生には影響しません。デバッグモードを無効にするか、ブラウザーの開発者ツール (コンソールとネットワーク) で報告されている他のエラーを確認してください。

• 認証ページが読み込み中のまま進まない：[SDK リスト] またはライセンス認証ページがデータを読み取れず、読み込みプレースホルダーが表示され続ける場合は、Player SDK for Web アプリケーションを作成し、権限付与されたドメイン名を直接バインドしてください。

• 最新の Player SDK for Web バージョンへのアップグレード：CSS と JavaScript の参照 URL を置き換えてください。残りのコードには互換性があるため、API を再統合する必要はありません。初期化設定に、domain と key を含む license パラメーターを追加する必要があります。プレーヤーを初期化する前に、コンソールで無料のライセンスを申請し、権限付与されたドメイン名をバインドしてください。

プラットフォーム共通の問題

• プラットフォームに依存しない問題については、「クロスプラットフォームプレーヤーの FAQ」をご確認ください。

• 経験豊富な開発者は、「再生エラーのトラブルシューティング」を独自に行うこともできます。

開発に関する問題

HTML5 プレーヤーでの vid と playauth の切り替え

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

replayByVidAndPlayAuth は ready イベントをトリガーしますか？

はい。ready イベントは、プレーヤーが動画の初期化と UI のレンダリングを完了したときに発行されます。その時点で、seek などのメソッドを安全に呼び出すことができます。次のようにしてイベントをリッスンします：

player.on('ready', function(){...});

再生ボタンのサイズと位置の調整

• CSS を上書きして再生ボタンのサイズを変更します。例 (半分のサイズ)：

   .prism-player .prism-big-play-btn {
      width: 45px;
      height: 45px;
      background-size: 128px 256px;
  }

• skinLayout の bigPlayButton の x プロパティと y プロパティを設定して、再生ボタンの位置を変更します。

  skinLayout: [
    { name: "bigPlayButton", align: "blabs", x: 30, y: 80 },
    {
      name: "H5Loading",
      align: "cc",
    },
    {
      name: "controlBar",
      align: "blabs",
      x: 0,
      y: 0,
      children: [
        { name: "progress", align: "tlabs", x: 0, y: 0 },
        { name: "playButton", align: "tl", x: 15, y: 26 },
        { name: "timeDisplay", align: "tl", x: 10, y: 24 },
        { name: "fullScreenButton", align: "tr", x: 20, y: 25 },
        { name: "volume", align: "tr", x: 20, y: 25 },
      ],
    },
  ]

seek メソッドを呼び出した後、一時停止ボタンを表示するにはどうすればよいですか？

ボタンはプレーヤーの以前の状態を反映します。シーク後に player.pause() を呼び出すことで、一時停止ボタンを表示できます。

初期再生位置の設定

watchStartTime を設定して、初期再生位置を指定します。

new Aliplayer({
  watchStartTime: 60, // 60 秒目から再生を開始します。
})

詳細については、「Aliplayer API リファレンス」をご参照ください。

自動再生時の自動フルスクリーン化

var player = new Aliplayer(
  {
    id: "player-con",
    source: "//example.aliyundoc.com/video/media02.mp4",
    width: "100%",
    height: "500px",
    autoplay: true,
    qualitySort: "asc",
    mediaType: "video",
    preload: true,
    isLive: false,
  },
  function (player) {
    player.mute();
    console.log("プレーヤーが作成されました");
  }
);
player.on("ready", function () {
  player.fullscreenService.requestFullScreen();
});

Aliplayer における preload: true と preload: false の違い

preload: true はプリロードを有効にします。preload: false はプリロードを無効にします。

プログレスバーでのシークの無効化

disableSeek: true を設定して、ユーザーがプログレスバーをドラッグできないようにします。詳細については、「プログレスバーのドラッグの無効化」をご参照ください。

現在の再生時間を定期的に取得

タイマーを使用して、1 秒ごとに player.getCurrentTime() を呼び出します。再生が一時停止した場合、エラーが発生した場合、または再生が終了した場合は、タイマーをクリアしてください。

var timer = null;

timer = setInterval(() => {
  var current = player.getCurrentTime();
  console.log(current);
}, 1000);

// タイマーをクリアします。
function clear() {
  if (timer) {
    clearTimeout(timer);
    timer = null;
  }
}
player.on("ended", function (e) {
  clear();
});
player.on("pause", function (e) {
  clear();
});
player.on("error", function (e) {
  clear();
});

Player SDK for Web に関するその他の一般的な問題

1. seek メソッドの精度：seek は浮動小数点値 (例：10.5) を受け付けます。互換性を向上させるために、切り捨てるか、小数点以下の桁数を少なくしてください。

2. ライブストリーム切断後の再接続：再接続の試行回数を設定できます。設定した試行回数後に再生が回復しない場合は、error イベントをリッスンして、次のように失敗を処理してください：

   player.on('error', (e) => { var code = String(e.paramData.error_code); })

3. ライセンスキーとダウンロード機能：再生に使用されるライセンスキーは、ダウンロード機能と互換性がありません。ダウンロードはアプリ情報に基づいて生成されます。

4. コントロールバーにテキストは表示されるがアイコンが表示されない：aliplayer-min.css が正しくインクルードされていることを確認してください。skinLayoutIgnore と skinLayout を一緒に使用しないでください。skinLayoutIgnore が優先され、コンポーネントが削除されます。レイアウト崩れを避けるために、プレーヤーコンテナに固定の高さ (400 px 以上) を設定してください。デバッグのために、公式の Vue デモと設定を比較することもできます。

5. iOS 向け Player SDK for Flutter のエラー 537067523: ログのトラブルシューティングに役立てるために、FlutterAliplayer.setTraceID を使用してトレース ID を設定します。ネットワークライブラリが最適化されている Player SDK for Flutter をバージョン 7.14.0 以降にアップグレードします。Alibaba Cloud CDN を使用していない場合は、CDN プロバイダーに連絡してリクエストログを確認します。

Player SDK for Web のバージョンを確認およびアップグレードする方法

1. バージョンの確認：プロジェクトに含まれている aliplayer-min.js ファイル、またはその設定内のバージョンフィールドを確認してください。

2. バージョンのアップグレード (リクエスター提供)：次の各言語パックファイルの 30 行目にあるバージョン変数を編集してください：language.SC_UTF8.php、language.SC_GBK.php、language.TC_UTF8.php、language.TC_BIG5.php。4 つのファイルすべてを新しいバージョン番号 (例：2.27.1 から 2.37.8) に更新してください。

再生に関する問題とエラー

H.265 エンコード動画の再生失敗

Player SDK for Web 2.14.0 以降は、H.265 エンコード動画をサポートしています。ライセンスを取得し、H.265 パラメーターを設定する必要があります。詳細については、「H.265/H.266 エンコードされたビデオストリームの再生」をご参照ください。

FLV または M3U8 ファイル再生時のクロスオリジンエラー

"Access is denied for this document" または "Access-Control-Allow-Origin" エラーが表示される場合は、再生ドメインのクロスオリジンアクセスを有効にしてください。詳細については、「クロスオリジンアクセスの設定」をご参照ください。

HTML5 プレーヤーが横向きモードにならない

プレーヤー SDK は横向きモードの API を提供していません。iOS では、横向きモードはシステムの向き設定に依存します。Android では、プレーヤーはフルスクリーンモードで自動的に横向きモードになります。

FLV 再生リクエストにおける Referer ヘッダーの欠落

1. プレーヤーのリクエストは、Web サイトの Referrer-Policy に従います。お使いの Referrer-Policy が、動画リクエストに Referer ヘッダーを含めることを許可していることを確認してください。

2. Referrer-Policy が Referer ヘッダーを許可しているにもかかわらず、動画リクエストにそれが含まれていない場合、Referer ベースの ACL が再生をブロックする可能性があります。enableWorker: false を設定してこれを解決してください。

プレーヤーウィンドウの黒帯の削除

黒帯は、動画がプレーヤーウィンドウを埋めない場合に表示されます。

黒帯はプレーヤーコンテナの背景です。<video> タグに object-fit: cover; を適用することで削除できます。

AliPlayer の初期化が TypeError: Failed to execute 'getComputedStyle' on 'Window' で失敗する

原因：controlBar.volume コンポーネントの初期化中に、内部の _getBottom() メソッドが null または Element ではない DOM 要素を取得するためです (通常、コンテナのレンダリングが完了していないことが原因です)。この値に対して getComputedStyle を呼び出すと、エラーがスローされ、残りの初期化がブロックされます。

解決策 1 (推奨)：Player SDK for Web をこの互換性問題を修正した 2.37.8 以降にアップグレードしてください。

解決策 2 (回避策)：プレーヤー設定に skinLayoutIgnore: ["controlBar.volume"] を追加して、音量コントロールの初期化をスキップしてください。音量コントロールを維持する必要がある場合は、プレーヤーを初期化する前にコンテナ要素が存在し、その offsetWidth が 0 より大きいことを確認してください。そうでない場合は、初期化を 200 ms 遅延させて再試行してください。

iOS および Android で loadByUrl が機能しない

// 'seek' は指定した時間にジャンプするだけで、再生は開始されません。
// iOS では、'play' は最初から再生を再開します。
// iOS では、フルスクリーン再生はネイティブプレーヤーにハイジャックされます。

document.querySelector(".no1").onclick = function () {
  player.loadByUrl("//player.alicdn.com/resource/player/qupai.mp4");
};

// 'play' および 'canplay' イベントをリッスンして seek を呼び出します。これは、一部のブラウザーでは機能しない場合があります。代替策として、最初の 'timeupdate' イベントで seek を呼び出すことを検討してください。
player.on("canplay", function () {
  player.seek(20);
});
// iOS でのフルスクリーンハイジャックに対する回避策はありません。

ビデオソースの切り替え後も前の動画が再生され続ける

Player SDK for Web 2.9.11 では、Windows 10 の 360 Browser の互換モードで loadByUrl が失敗します。ソースが切り替えられた後も、前の動画が再生され続けます。

原因：ブラウザーの互換性の問題。

解決策：Player SDK for Web 2.9.19 以降にアップグレードしてください。

iOS で player.seek() メソッドが失敗する

// 'play' および 'canplay' イベント内で seek を呼び出します。そうしないと、効果がない場合があります。
player.on("canplay", function () {
  player.seek(20);
});

ストリーム再開後のライブエッジへの追いつき

問題の説明

ライブストリームの再生中にアプリケーションをバックグラウンドに切り替えると、再生が一時停止されます。 アプリケーションに戻った後、ライブストリームは一時停止が発生した時点から再生され続けます。 再生の再開後に最新のクリップを再生できるように、再生待ち時間を短縮するための設定はありますか?

解決策

再生を再開した後、ライブストリームは一時停止が発生した時点から再生を続けます。 パラメータを設定して再生を高速化することはできません。 ライブストリームを再度プルしてから、プレーヤーを使用してライブストリームを再度再生することをお勧めします。

WeChat ミニプログラムでの Player SDK for Web の使用

Player SDK for Web は WeChat ミニプログラムでは実行されません。代わりに、ミニプログラムの組み込みビデオコンポーネントを使用してください。詳細については、「WeChat ミニプログラム」をご参照ください。

クロスオリジンでのライブストリームのプルが失敗する

ローカルのクロスオリジン検証が失敗する場合は、「ドメイン管理」の設定を確認してください。独自のドメインのみが設定されている場合、localhost からのリクエストは失敗します。デフォルトでは、ドメインが設定されていない場合、localhost は検証を通過します。

iOS での VOD 動画の再生失敗

考えられる原因：iOS の Safari は、圧縮率が高い、または high エンコーディングプロファイルの動画をデコードできない場合があります。

解決策：再生前に動画をトランスコードしてください。詳細については、「オーディオと動画のトランスコーディング」をご参照ください。

プラットフォーム固有の問題

WebView のデフォルトサムネイルの削除

一部の Android WebView では、<video> タグの poster 属性を省略すると、デフォルトのサムネイル (再生ボタン付きの灰色の背景) が表示されます。

解決策：<video> タグに無効な poster 属性を設定して、デフォルトを上書きしてください。

extraInfo: { poster: 'noposter' } // プレーヤーパラメーター 'extraInfo' の内容は <video> タグに渡されます。

IE での最高ドキュメントモードの有効化

<meta http-equiv="x-ua-compatible" content="IE=edge" >

WeChat での自動再生の有効化

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {            
  wx.config({
      // 設定の詳細。内容が正しくなくても wx.ready は使用できます。
      debug: false,
      appId: '',
      timestamp: 1,
      nonceStr: '',
      signature: '',
      jsApiList: []
  });
  wx.ready(function() {
      var video=$(player.el()).find('video')[0];
      video.play();
  });
};
// iOS での自動再生の問題に対する回避策。
autoPlay();
</script>