ApsaraVideo VOD:Player SDK for Web FAQ

ライセンス関連の問題

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

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

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

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

開発に関する問題

HTML5 プレーヤーで vid と playauth を切り替える方法

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

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

• 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("The player is created"); // プレーヤーが作成されます
  }
);
player.on("ready", function () {
  player.fullscreenService.requestFullScreen();
});

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

ユーザーによるプログレスバーのドラッグを防ぐには、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();
});

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

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. プレーヤーのリクエストは、ウェブサイトの Referrer-Policy に従います。Referrer-Policy が動画リクエストに Referer ヘッダーを含めることを許可していることを確認してください。

2. Referrer-Policy で Referer ヘッダーが許可されているにもかかわらず、ビデオ リクエストにそのヘッダーが含まれていない場合、Referer ベースの ACL によって再生がブロックされることがあります。この問題を解決するには、enableWorker: false を設定します。

プレーヤーウィンドウから黒い帯を削除する方法

動画がプレーヤーウィンドウを満たしていない場合、黒い帯が表示されます。

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

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 ブラウザの互換モードで 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>