よくある質問 - - Alibaba Cloud ドキュメントセンター

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

ApsaraVideo Player SDK for Webは、HTML5プレーヤーとFlashプレーヤーをサポートしています。 ApsaraVideo Player SDK for Webが統合されている場合、プレーヤーは自動的に照合されます。 ApsaraVideo Player SDK For Webを統合する方法の詳細については、「クイック統合」をご参照ください。 [オンライン設定] ページの [HTML5] または [Flash] をクリックして、デバイスの種類、ブラウザーの種類、ビデオ送信プロトコルに基づいてプレーヤーを選択することもできます。プレーヤーを選択するときは、次の項目に注意してください。

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

注 ApsaraVideo Player for Webを統合する場合、useFlashPrismパラメーターを設定して、使用するプレーヤーを指定できます。 useFlashPrism=trueはFlashプレーヤーを示し、useFlashPrism=trueはHTML5プレーヤーを示します。

HTML5プレーヤーの問題

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

Call the replayByVidAndPlayAuth operation to change the values of the vid and playauth parameters. 次のサンプルコードに例を示します。

 player.replayByVidAndPlayAuth(newVid、newPlayAuth)

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

再生ボタンのサイズを変更するには、CSSコードを書き換えます。次のサンプルコードは、再生ボタンのサイズを半分に縮小する例を示しています。
```
 . プリズムプレーヤー。prism-big-play-btn {
    幅: 45px;
    高さ: 45px;
    背景サイズ: 128px 256px;
}
```

再生ボタンの位置を変更するには、skinLayoutのbigPlayButtonパラメーターのxプロパティとyプロパティの値を変更します。次のサンプルコードに例を示します。

skinLayout: [
    {name: "bigPlayButton", align: "blabs", x: 30, y: 80},
    {
      名前: "H5Loading" 、align: "cc"
    },
    {
      名前: "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() メソッドを呼び出して一時停止機能を有効にします。ビデオは、ボタンが押されたときにビデオの現在の状態に基づいて再生または一時停止されます。

Flash playerの問題

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

指定された時点のビデオデータがAlibaba Cloud CDNから取得できることを確認してください。 When an MP4 or FLV video is advanced or rewound, the player sends a request containing the time range information to CDN. 次に、CDNはリクエストを受信し、対応するビデオデータを返します。

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

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

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

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

 // 既存のFlashプレーヤーを破棄します。
     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プレーヤーがビデオのサムネイルを表示しない場合はどうすればよいですか?

Check whether the thumbnail URL specified in the cover field is valid.
サムネイルURLに含まれるドメイン名のルートディレクトリに、有効なcrossdomain.xmlファイルが存在するかどうかを確認します。

モバイルデバイスで自動フルスクリーン機能を無効にするにはどうすればよいですか?

Set playsinline to true for iOS devices.
AndroidデバイスのWeChatまたはQQ Browserでビデオを再生すると、ビデオはフルスクリーンモードで強制的に表示されます。これは、Tencentブラウザがビデオタグをハイジャックして、内蔵プレーヤーでビデオを自動的に再生するためです。この問題を解決するには、イマーシブモードを有効にして、Dom要素が上書きされないようにします。 For more information, see How do I enable the immersive mode for the HTML5 player?

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

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

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

How do I enable autoplay in full-screen mode?

Mute the video and set autoplay to true to enable autoplay. 次に、readyイベントでfullscreenService.requestFullScreen操作を呼び出して、自動フルスクリーン機能を有効にします。 The following sample code provides an example:

<!DOCTYPE html>
<html>
<ヘッド>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scale=no"/>
  <title>Aliplayer Functions</title>
  <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.17/skins/default/aliplayer-min.css" />
  <script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.17/aliplayer-min.js"></script>
  <! -後続の操作を実行する前に、CSSファイルとJSファイルをダウンロードします。 ->
</head>
<body>

<div id="player-con"></div>
<スクリプト>
    var player = new Aliplayer({
        id: "player-con" 、
       source:"// example.aliyundoc.com/video/media02.mp4" 、
        width: "100%",
        高さ: "500px" 、
        autoplay: true、
        qualitySort: "asc",
        "mediaType": "ビデオ" 、
            preload: true,
        isLive: false、

    }, function (プレーヤー) {
      player.mute()
        console.log("The player is created1");
    });
  // }
  player.on('ready',function(){
  player.fullscreenService.requestFullScreen()

  })


</script>
</body>
</html>

ライブコメント機能は、iOSデバイスでビデオをフルスクリーンモードで再生する場合は使用できません。

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

原因: iOSデバイスでビデオをフルスクリーンモードで再生すると、iOSのネイティブユーザーインターフェイス (UI) が使用されます。 In this case, live comments cannot be displayed on videos.

Solution: You can configure the height and width of the video on iOS devices to fill the screen. これは、ライブコメント機能を損なうことなく、iOSデバイスのフルスクリーン効果をシミュレートします。

ApsaraVideo Player SDKを統合し、uniapp onloadライフサイクル内でプレーヤーをインスタンス化する方法を教えてください。

// ApsaraVideo Player SDKを統合し、uniapp onloadライフサイクル内でプレーヤーをインスタンス化します。
onLoad() {
const script = document.createElement('script');
const link = document.createElement('link');
link.href = 'https:// g.alicdn.com/de/prismplayer/2.9.16/skins/default/aliplayer-min.css'
link.setAttribute('rel','stylesheet')
script.onload = () => {
console.log('Aliplayer' 、window.Aliplayer);
let player = new Aliplayer({
"id": "player-con" 、source:"// player.alicdn.com/video/aliyunmedia.mp4" 、"width": "100%" 、"height": "500px" 、"autoplay": false、"isLive": false、"rePlay": false、"playsinline": true、"preload": true、"controlBarVisibility": "ホバー" 、"useH5Prism": true
}, function (プレーヤー) {
})
}
script.src = 'https:// g.alicdn.com/de/prismplayer/2.9.16/aliplayer-min.js';
script.setAttribute('type','text/javascript')
document.body.appendChild (スクリプト);
document.body.appendChild (リンク);
}

iOSデバイスではplayer.seek() メソッドは有効になりません

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

// playイベントとcanplayイベントでplayer.seek() メソッドを呼び出します。 そうでなければ、この方法は有効にならない。
player.on('canplay',function(){
player.seek (20)
})

loadByUrlをiOSまたはAndroidデバイスで呼び出すことはできません

seekメソッドは、loadByUrlで指定されたビデオにユーザーをリダイレクトします。 ただし、ビデオは再生できません。 
iOSデバイスで再生方法を呼び出すと、ビデオが最初から再生されます。
iOSデバイスでフルスクリーンモードで再生されるビデオは、内蔵プレーヤーで強制的に再生されます。

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

    Call the seek method in the play and canplay events. シークメソッドは特定のブラウザでは有効にならない場合があります。 この場合、first timeupdateイベントでseekメソッドを呼び出します。
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.

HTML5プレーヤーでは横向きモードでビデオを再生できません

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