基本機能 - - Alibaba Cloud ドキュメントセンター

共通設定

HTML5プレーヤーとFlashプレーヤーを使用してFlash Video (FLV) ビデオとHTTP Live Streaming (HLS) ビデオを再生する場合は、クロスオリジンリソース共有 (CORS) を設定する必要があります。詳細については、「CORSの設定」をご参照ください。

HTML5プレーヤーを使用するときにCORSを設定しないと、再生中に次のエラーメッセージが返されます。
「Access-Control-Allow-Origin」ヘッダは、要求されたリソースに存在しない。
Flashプレーヤーの使用時にCORSを設定しないと、再生中に次のエラーメッセージが返されます。

AndroidデバイスのWeChatまたはQQ Browserでビデオを再生すると、ブラウザはフルスクリーンモードでビデオを強制的に再生します。ブラウザのこのデフォルト設定は変更できません。ただし、没入モードを有効にして、Dom要素が上書きされないようにすることができます。このようにして、フルスクリーンモードでの自動再生が防止される。詳細については、「HTML5プレーヤーの没入モードを有効にする方法」をご参照ください。

注フルスクリーン再生が開始されたら、入力を設定して絶対位置を設定し、ソフトキーボードを有効にできます。

メソッド呼び出し

ApsaraVideo Player SDK for Webの基本機能は、属性またはメソッドを使用することで有効になります。

注詳細については、「t1959853.html#task_1997027」をご参照ください。

次のサンプルコードは、メソッドを呼び出す方法の例を示しています。

HTML5プレーヤー
プレーヤーの作成に使用される関数のコールバックで、次のメソッドを呼び出します。サンプルコード：
```
// HTML5プレーヤー
 var player = new Aliplayer({}, function(player) {
    player.play();
 });
```
Flash player
readyイベントが発生した後、またはプレーヤーを作成するためのreadyコールバックで、次のメソッドを呼び出します。サンプルコード：
```
// Flashプレーヤー
 player.on('ready',function(e) {
    player.play();
 });
```

再生の管理

ApsaraVideo Player SDK for Webを使用すると、指定した時点からビデオを再生し、再生を一時停止できます。 HTML5プレーヤーとFlashプレーヤーで同じメソッドを呼び出すことができます。

指定した時点からビデオを再生する

コールは、指定された時点までスキップして再生を開始しようとします。サンプルコード：

// timeは指定された時点を指定します。 (単位：秒) 
player.seek (時間)

一時停止再生

pauseを呼び出して再生を一時停止します。サンプルコード：

player.pause()

表示モードの指定

ApsaraVideo Player SDK for Webを使用すると、回転やミラーリングなどの表示設定を構成できます。 HTML5プレーヤーのみがこの機能をサポートしています。

注

PCおよびiOSブラウザは表示設定をサポートしています。
ChromeとFirefox for Androidは表示設定をサポートしています。
WeChatまたは他のほとんどのブラウザは、再生に内蔵プレーヤーを使用します。したがって、表示設定はサポートされていません。

回転角度の指定

setRotateを呼び出して、指定した角度に基づいて画像を回転します。回転角度を照会することもできます。サンプルコード：

// 回転角度を指定します。 Angleの正の値は時計回りの回転を指定します。 Angleの負の値は、反時計回りの回転を指定します。 例えば、player.setRotate(180) は、180度の時計回りの回転を指定する。 
player.setRotate(<Angle>)
// 回転角度を取得します。 
player.getRotate()

ミラーリングモードの指定

setImageを呼び出して、ミラーリングモードを設定します。サポートされているモード: 水平ミラーリングと垂直ミラーリング。サンプルコード：

// 水平ミラーリング。
player.setImage('水平')
// 垂直ミラーリング。
player.setImage('vertical')

ApsaraVideo Player SDK for Webには、ビデオの高さと幅を指定するためのvideoHeightおよびvideoWidth属性が用意されています。ほとんどの場合、ビデオの高さと幅はコンテナの高さと幅よりも小さくなります。これにより、回転およびミラーリング中にビデオが親コンテナからオーバーフローするのを防ぎます。サンプルコード：

 width: '100', // コンテナの幅。
 height: '100% ', // コンテナの高さ。
 videoHeight:"200px", // ビデオの高さ。

再生情報の取得

ApsaraVideo Player SDK for Webを使用すると、現在の再生の進行状況と再生時間を取得できます。

現在の再生進行状況の取得

getCurrentTimeを呼び出して、現在の再生時間を取得します。サンプルコード：

// 単位: 秒。 
player.getCurrentTime()

再生時間の取得

getDurationを呼び出して、ビデオの合計時間を取得します。継続時間は、ビデオがロードされた後、または再生イベントが発生した後にのみ取得できます。サンプルコード：

player.getDuration()

再生ステータスの取得

getStatusを呼び出して、再生ステータスを取得します。戻り値:

サンプルコード：

player.getStatus()

ボリュームの指定

音量を調整したり、ビデオをミュートしたりできます。

重要

音量を調整する

setVolumeを呼び出して音量を調整します。現在のボリュームを取得することもできます。サンプルコード：

// ボリュームを0から1までの実数に設定します。 
player.setVolume (0)
// 現在のボリュームを取得します。 
player.getVolume()

Mute theビデオ

muteメソッドを呼び出して、再生中にビデオをミュートします。サンプルコード：

player.mute()

再生速度の指定

再生速度はHTML5プレーヤーに対してのみ指定できます。 ApsaraVideo Player SDK for Webのデフォルトのユーザーインターフェイス (UI) を使用する場合は、組み込みの再生速度機能を使用して、ビデオの視聴時に再生速度を調整できます。カスタムUIを使用する場合は、setSpeedを呼び出して再生速度を調整できます。

注再生速度の設定を無効にする方法の詳細については、「t1959853.html#task_1997027のsetSpeed」をご参照ください。

サンプルコード：

// 再生速度を指定します。 次のサンプルコードは、再生速度を現在の速度の2倍に設定する方法の例を示しています。 
player.setSpeed (2)

マルチ定義再生

マルチ定義再生用に複数の定義でストリームのURLを設定できます。

再生にVIDとPlayAuthを使用する場合、追加の設定は必要ありません。 ApsaraVideo Player SDK for Webは、ApsaraVideo VODから定義のリストを取得します。再生ページの [設定] をクリックすると、定義リストが表示されます。

注 VIDとPlayAuthを使用して再生する場合は、format属性を指定して、HTML5プレーヤーのMP4またはMP3形式のメディアファイルを再生するかどうかを決定できます。デフォルトでは、MP4形式のメディアファイルが再生されます。
URLベースの再生を使用する場合は、ソース属性のキーと値のペアを構成して、複数の定義でストリームのURLを指定する必要があります。キーと値のペアはJSON形式です。設定が有効になったら、再生ページの [設定] をクリックして定義リストを表示できます。

注

定義リストの表示方法を変更する場合は、定義コンポーネントを使用できます。サンプルコードの詳細については、「関数」をご参照ください。

URLベースの再生モードでは、ソース属性の次のキーと値のペアがサポートされます。

   "OD": "<オリジナル品質のURL>"
   "FD": "<低定義URL>"
   "LD":"<標準定義URL>"
   "SD": "<High definition URL>"
   "HD": "<超高精細URL>"
   "2K": "<2K URL>"
   "4K": "<4K URL>"

次のサンプルコードは、URLベースの再生モードで定義を設定する方法の例を示しています。

// 次の例は、高解像度と超高解像度のURLを設定する方法を示しています。 
source:'{"HD":"http:// ******/player/hdexample.mp4" 、"SD":"http:// ******/player/sdexample.mp4"}'

ApsaraVideo Player SDK for Webでは、qualitySort属性を指定して、定義を昇順または降順で一覧表示することもできます。

descの値は、最高の定義から最低の定義への降順を指定します。
ascの値は、最低の定義から最高の定義への昇順を指定します。

注

プレーヤーは、指定した定義を保持します。次回ビデオを再生するときは、前回指定した定義が使用されます。最後にビデオを再生したときに定義を指定しなかった場合、再生には低解像度が使用されます。
ビデオが指定された定義で再生されない場合、プレーヤーは自動的に次のより低い定義に切り替わり、メッセージを表示します。 HTML5プレーヤーのみが定義切り替えをサポートしています。

ループ再生の有効化

ApsaraVideo Player SDK for Webでは、rePlay属性を指定したり、ループ再生用の終了イベントをリッスンしたりできます。

rePlay属性の指定に使用されるサンプルコード

rePlay:true

終了したイベントをリッスンするために使用されるサンプルコード

player.on ('endd', function(){
   player.replay()
})

:基本機能