ApsaraVideo VOD:Player SDK for Web に関するよくある質問

ライセンス関連の問題

ライセンスに関するよくある質問で、無効または期限切れのライセンスの問題を解決してください。

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

• プラットフォームに依存しない問題については、「クロスプラットフォームプレイヤーに関するよくある質問」をご参照ください。

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

開発に関する問題

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: "bl", x: 30, y: 80 },
    {
      name: "H5Loading",
      align: "cc",
    },
    {
      name: "controlBar",
      align: "bl",
      x: 0,
      y: 0,
      children: [
        { name: "progress", align: "tl", 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 プレイヤーが横向きモードにならない

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

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

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

2. Referrer-Policy が Referer ヘッダーを許可しているにもかかわらず、動画リクエストに 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 遅延させて再試行してください。

loadByUrl が iOS と Android で機能しない

// `seek` は時間にジャンプするだけで、再生はしません。
// `play` は iOS で最初から再生を再開します。
// 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 ブラウザの互換モードで 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>