ApsaraVideo Player SDK for Webに関するFAQ - ApsaraVideo VOD - Alibaba Cloud ドキュメントセンター

このトピックでは、ApsaraVideo Player for Webに関するよくある質問に対する回答を提供します。

ApsaraVideo player for Webのプレーヤーを選択するにはどうすればよいですか?

ApsaraVideo Player SDK for Webは、HTML5プレーヤーとFlashプレーヤーをサポートしています。 ApsaraVideo Player SDK for Webが統合されている場合、プレーヤーを指定するか、 .jsファイルを追加してアダプティブモードを設定できます。 [オンライン設定] ページの [HTML5] または [Flash] をクリックして、デバイスの種類、ブラウザーの種類、ビデオ送信プロトコルに基づいてプレーヤーを選択することもできます。

プレーヤーを選択するときは、次の項目に注意してください。

リアルタイムメッセージングプロトコル (RTMP) で送信されたビデオを再生するには、Flashプレーヤーを使用する必要があります。 PC上のブラウザのみがFlashプレーヤーをサポートし、サポートは制限されています。詳細については、「Flash playerでサポートされているブラウザ」をご参照ください。
RTMP以外のプロトコルで送信されたビデオを再生するには、HTML5プレーヤーを使用することをお勧めします。

HTML5プレーヤーの問題

HTML5プレーヤーを有効にするにはどうすればよいですか?

次のいずれかの方法を使用して、HTML5プレーヤーを有効にできます。

JavaScriptファイルのリンクを含めて、HTML5プレーヤーを有効にします。
アダプティブストリーミングモードを有効にし、useH5Prismパラメーターをtrueに設定します。

HTML5プレーヤーのvidパラメーターとplayauthパラメーターの値を変更するにはどうすればよいですか?

replayByVidAndPlayAuth操作を呼び出して、vidパラメーターとplayauthパラメーターの値を変更します。サンプルコード：

 player.replayByVidAndPlayAuth(newVid, newPlayAuth)

HTML5プレーヤーの再生ボタンのサイズと位置を変更するにはどうすればよいですか?

再生ボタンのサイズを変更するには、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`メソッドを呼び出した後、HTML5プレーヤーで再生 /一時停止を実装するにはどうすればよいですか?

seekメソッドを呼び出した後、player.pause() メソッドを呼び出して一時停止機能を有効にします。ビデオがすでに一時停止されている場合は、ボタンを押してビデオを再生できます。

HTML5プレーヤーを使用してFLVまたはM3U8ファイルを再生するときにクロスオリジンエラーが発生した場合はどうすればよいですか?

エラーメッセージ "Access is denied for this document" が表示された場合、または "Access-Control-Allow-Origin" 関連のエラーが発生した場合は、再生ドメインのCORSを有効にする必要があります。詳細については、「CORS の設定」をご参照ください。

HTML5プレーヤーで横向きモードでビデオを再生できない場合はどうすればよいですか?

ApsaraVideo Player SDKには、ランドスケープモードでの再生を有効にするAPI操作はありません。 iOSデバイスの場合、システム設定でランドスケープモードを有効にできます。 Androidデバイスの場合、ユーザーがフルスクリーンモードを有効にすると、ビデオはランドスケープモードで自動的に再生されます。

プレーヤーでのビデオ再生の開始時間を指定するにはどうすればよいですか?

var seeked = false;
player.on('canplaythrough',function  (e) {  
if(!seeked)
  {
    seeked = true;
    player.seek(100);
  }
});

HTML5プレーヤーを使用してビデオを再生するときに黒いバーが表示される場合はどうすればよいですか?

HTML5プレーヤーを使用してビデオを再生すると、ビデオがウィンドウ全体に表示されない場合は、黒いバーが表示されます。次の図に例を示します。常见问题

黒いバーは、プレーヤーコンテナの背景色を示します。この問題を解決するには、ビデオタグのCSSプロパティobject-fit: cover; を設定します。

HTML5プレーヤーを使用してFLVビデオを再生するときに、Refererヘッダーがリクエストに含まれていない場合はどうすればよいですか?

Webサイトのリクエストにリファラーヘッダーを含めることができるように指定しているかどうかを確認します。詳細については、「Referrer-Policy」をご参照ください。プレイヤーがリクエストを開始すると、Webサイトに指定したリファラーポリシーが優先的に使用されます。
WebサイトのリクエストにRefererヘッダーを含めることができ、Refererヘッダーがリクエストに含まれていないことを指定した場合は、プレーヤーでenableWorker: falseパラメーターを設定します。リファラーを使用してACLベースのアクセス制御を有効にしたが、リクエストにリファラーヘッダーが含まれていない場合、ビデオの再生が禁止される場合があります。

Flash playerの問題

FlashプレーヤーでMP4またはFLVビデオのビデオシーク機能を有効にするにはどうすればよいですか?

指定された時点から開始するビデオデータがAlibaba Cloud CDNから取得できることを確認してください。 MP4またはFLVビデオを進めたり巻き戻したりすると、プレイヤーは時間範囲情報を含むリクエストをCDNに送信します。次に、CDNはリクエストを受信し、対応するビデオデータを返します。

ビデオ検索機能を有効にするには、次の2つの要件を満たす必要があります。

MP4ビデオのタイムスタンプやFLVビデオのメタデータなどのインデックス情報は、ファイルヘッダーに含める必要があります。プレーヤは、インデックス情報を解析した後、前進または巻戻し操作によって指定された時間範囲のデータポイントを取得し、CDNに要求を送信します。
CDNコンソールで [動画の検索] をオンにします。この機能を有効にすると、時間範囲またはバイト範囲の情報を含むリクエストを処理できます。詳細については、「ビデオ検索」をご参照ください。

Flashプレーヤーのvidパラメーターとplayauthパラメーターの値を変更するにはどうすればよいですか?

既存のFlash playerを破壊し、新しいvidとplayauthの値に基づいて新しいFlash playerを作成します。サンプルコード：

// Destroy the existing Flash player.
     FlashPlayer.dispose();
     $('#FlashPlayer').empty();
     // Create a new Flash player.
     FlashPlayer = new Aliplayer({
            id: 'FlashPlayer',
            autoplay: true,
            playsinline:true,
            vid: newVid,
            playauth: newPlayAuth,
            useFlashPrism:true
      });

Flashプレーヤーでのビデオ再生の開始時間を指定するにはどうすればよいですか?

var seeked = false;
player.on('loadedmetadata',function  (e) {
  if(!seeked)
  {
    seeked = true;
    player.seek(20);
  }
});

FlashプレーヤーがM3U8ファイルを再生するときにCORSエラーが報告された場合はどうすればよいですか?

プレーヤーがCORSを実装するためのCORSファイルを追加します。 crossdomain.xmlファイルにCORS権限を追加し、再生URLが属するドメインのルートディレクトリにファイルを追加する必要があります。

たとえば、http://example.com/crossdomain.xml に http://example.com/app/test.m3u8 を追加する必要があります。

<?xml version="1.0" encoding="UTF-8"?>
<cross-domain-policy>
    <allow-access-from domain="*"/>
    <allow-http-request-headers-from domain="*" headers="*" secure="false"/>
</cross-domain-policy>

Flashプレーヤーがビデオのサムネイルを表示しない場合はどうすればよいですか?

coverフィールドで指定したサムネイルURLが有効かどうかを確認します。
coverフィールドで指定したサムネイルURLに含まれるドメイン名のルートディレクトリに、有効なcrossdomain.xmlファイルが存在するかどうかを確認します。

ブラウザのハイジャックによるビデオ再生の問題

ほとんどの場合、ブラウザの組み込みプレーヤーは、Webサイトでビデオを再生するために使用されます。ブラウザの再生設定が最も優先されます。ブラウザのハイジャックは、ApsaraVideo player SDKのビデオコンポーネントではなく、ブラウザの組み込みプレーヤーを再生に使用する場合に発生します。この場合、JavaScriptまたはCSSファイルを使用して再生設定を変更することはできません。プレーヤービューが指定されたビューと異なる、プレーヤーの特定の機能を使用できない、再生中に予期しないUIまたは広告が表示される、動画がフルスクリーンモードで強制的に再生されるなどの問題が発生する可能性があります。

ほとんどの場合、ブラウザのハイジャックは、WeChat、UC browser、QQ Browserなどのモバイルデバイス上のブラウザで発生します。次のセクションでは、ブラウザのハイジャックに関するよくある質問に対する回答を示します。

iOSデバイスでビデオをフルスクリーンモードで再生するときにライブコメント機能を使用できない場合はどうすればよいですか?

問題の説明: iOSデバイスでビデオをフルスクリーンモードで再生する場合、ライブコメント機能は使用できません。ただし、この機能は、ユーザーがフルスクリーンモードを終了した後に使用できます。

解決策: iOSデバイスでビデオをフルスクリーンモードで再生する場合、SDKのビデオコンポーネントの代わりにiOSのネイティブUIが使用されます。この場合、UIを変更したり、ビデオにライブコメントを表示したりすることはできません。この問題を解決するには、iOSデバイスのビデオの高さと幅を画面全体に設定します。これは、ライブコメント機能を損なうことなく、iOSデバイスのフルスクリーン効果をシミュレートします。

その他の問題

デフォルトのサムネイルを削除するにはどうすればよいですか?

問題の説明: 特定のAndroidフォンで、<video> タグにposterプロパティを指定しないと、デフォルトのサムネイルが表示されます。次の図は、デフォルトのサムネイルを示しています。

解決策: デフォルトのサムネイルを削除する場合は、<video> タグに無効なposterプロパティを指定して、デフォルトのサムネイル設定を上書きします。サンプルコード：

extraInfo: { poster: 'noposter' } // The information contained in the player parameter extraInfo is passed to the <video> tag.

ApsaraVideo Player for Webを使用してWeChatミニプログラムでビデオを再生するにはどうすればよいですか?

ApsaraVideo Player for WebはWeChatミニプログラムをサポートしていません。 WeChatミニプログラムでビデオを再生するには、組み込みプレーヤーを使用する必要があります。デモの詳細については、「デモのオンライントライアルとソースコード」をご参照ください。

H.265エンコードされたビデオを再生できない場合はどうすればよいですか?

ApsaraVideo Player SDK for Web V2.14.0以降は、H.265ビデオストリームの再生をサポートしています。 H.265ビデオストリームを再生するには、ライセンスを申請し、H.265機能を有効にするパラメータを設定します。詳細については、「H.265およびH.266ビデオの再生」をご参照ください。

MOVビデオを再生できない場合はどうすればよいですか?

ApsaraVideo Player SDK for Webは、ビデオタグと同じ方法でMOVビデオをサポートします。 MOVビデオを再生できない場合、ビデオファイルが破損している可能性があります。

Internet Explorerで利用可能な最高モードでコンテンツを表示するにはどうすればよいですか?

10より前のバージョンのInternet Explorerで使用可能な最高モードを有効にする必要があります。サンプルコード：

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

フルスクリーンモードで自動再生を有効にするにはどうすればよいですか?

ビデオをミュートし、autoplayをtrueに設定して自動再生を有効にします。次に、readyイベントでfullscreenService.requestFullScreen操作を呼び出して、自動フルスクリーン機能を有効にします。サンプルコード：

<script>
    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 created1");
    });
  // }
  player.on('ready',function(){
  player.fullscreenService.requestFullScreen()

  })


</script>

ApsaraVideo Player SDK for Webをアプリに統合するにはどうすればよいですか?

サンプルコード：

<template>
  <view class="container">
    <p>VUE2 Demo</p>
    <div id="url-player-test"></div>
  </view>
</template>
<script>
  export default {
    mounted() {
      // Use the script and link tags to add the CSS file and ApsaraVideo Player SDK for Web package to uni-app.
      this.loadWebPlayerSDK().then(() => {
        // To use custom components, uncomment the following line:
        // this.loadComponent().then(() => {
        let player = new Aliplayer({
          id: "url-player-test",
          source: "//player.alicdn.com/video/aliyunmedia.mp4",
          width: "100%",
          height: "100%",
        }, function (player) {
        });
        player.one('canplay', function () {
          console.log('canplay', player.tag);
          player.tag.play();
        });
        // }).catch((e) => { console.log("Component loading failed", e) })
      }).catch((e) => {
        console.log("Loading of ApsaraVideo Player SDK failed.", e);
      });
    },
    data() {
      return {}
    },
    methods: {
      loadWebPlayerSDK() {
        return new Promise((resolve, reject) => {
          const s_tag = document.createElement('script'); // Add the .js file of the player.
          s_tag.type = 'text/javascript';
          s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
          s_tag.charset = 'utf-8';
          s_tag.onload = () => {
            resolve();
          }
          document.body.appendChild(s_tag);
          const l_tag = document.createElement('link'); // Add the .css file of the player.
          l_tag.rel = 'stylesheet';
          l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
          document.body.appendChild(l_tag);
        });
      },
      loadComponent() {
        return new Promise((resolve, reject) => {
          const s_tag = document.createElement('script');
          s_tag.type = 'text/javascript';
          // Download the component .js file and store the file in the /static/ directory of the project.
          // Download URL: https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
          s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
          s_tag.charset = 'utf-8';
          s_tag.onload = () => {
            resolve();
          }
          document.body.appendChild(s_tag);
        });
      }
    }
  }
</script>
<style>
  .container {
    padding: 20px;
    font-size: 14px;
    height: 800px;
  }
</style>

iOSデバイスでplayer.seek() メソッドが有効にならない場合はどうすればよいですか?

playイベントとcanplayイベントでplayer.seek() メソッドを呼び出す必要があります。そうでなければ、この方法は有効にならない。

 // Call the player.seek() method in the play and canplay events. Otherwise, the method may not take effect.
  player.on('canplay',function(){
        player.seek(20)
      })

iOSまたはAndroidデバイスでloadByUrlを呼び出すことができない場合はどうすればよいですか?

// The seek method only redirects users to the position specified in the loadByUrl operation. However, the video cannot be played.
// If you call the play method on iOS devices, the video is replayed from the beginning.
// Videos played in full-screen mode on iOS devices are forced to be played in the built-in player.

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

 // Call the seek method in the play and canplay events. The seek method may not take effect for specific browsers. In this case, call the seek method in the first timeupdate event.
  player.on('canplay',function(){
        player.seek(20)
       })
 // You cannot resolve the issue where videos played in full-screen mode on iOS devices are hijacked by the built-in player.

ビデオソースの切り替え後も前のビデオがまだ再生されている場合はどうすればよいですか?

問題の説明: Windows 10では、ApsaraVideo Player SDK for Web 2.9.11のloadByUrl操作が、360セキュアブラウザーの互換モードで異常です。ビデオソースが切り替えられた後、前のビデオはまだ再生されています。

原因: ブラウザの互換性。

解決策: ApsaraVideo Player SDK for Web 2.9.19以降を使用します。

定期的に再生時間を取得するにはどうすればよいですか?

タイマーを使用して再生時間を取得することで、getCurrentTimeメソッドを毎秒呼び出すことができます。ビデオの再生が一時停止、失敗、または終了したときにタイマーをクリアします。

 var timer = null;

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

// Clear the timer.
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();
 });

プログレスバーを無効にするにはどうすればよいですか?

HTML5プレーヤーの場合、進行状況バーに関連するコードを削除します。この方法では、進行状況バーは表示されず、進行状況バーの進行状況ハンドルをドラッグすることはできません。 skinLayoutパラメーターを指定します。 controlBar属性またはcontrolBar属性のprogressパラメーターを削除できます。サンプルコード：
説明
シーク機能を無効にして進行状況バーを保持する場合は、クライアント側でシークイベントをリッスンします。詳細については、「プログレスバーのシークを無効にする」をご参照ください。
```
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},
      ]
    }
  ]
```
Flash playerの場合は、disableSeekパラメーターを指定します。詳細は、「API操作」をご参照ください。

WeChatで自動再生機能を有効にするにはどうすればよいですか?

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
function autoPlay() {            
wx.config({
                // The configuration information. The wx.ready method is available even if the configuration information is invalid.
                debug: false,
                appId: '',
                timestamp: 1,
                nonceStr: '',
                signature: '',
                jsApiList: []
            });
            wx.ready(function() {
                var video=$(player.el()).find('video')[0];
                video.play();
            });
    };
    // Enable video autoplay on iOS devices.
    autoPlay();
</script>

ライブストリームの再開後に最新のクリップを取得するにはどうすればよいですか?

問題の説明

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

解決策

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