短いビデオリストプレーヤー - ApsaraVideo VOD - Alibaba Cloud ドキュメントセンター

ApsaraVideo player SDKを使用して、短いビデオリストプレーヤーを作成できます。このトピックでは、AndroidまたはiOS用の短いビデオリストプレーヤーを作成する方法を示します。このトピックでは、サンプルコードも提供します。

効果の例

重要ショートビデオリストプレーヤーは、MP4ビデオ専用に最適化されています。 HLSストリームを再生するには、短いビデオリストプレーヤーの代わりに複数のプレーヤーを使用することをお勧めします。

Androidでの重要な実装

短いビデオリストプレーヤーを作成します。

短いビデオリストプレーヤーを作成し、必要なパラメータを設定します。以下のコードを例として使用します。

プライベートAliListPlayer mVideoListPlayer;
……
// 必須です。 短いビデオリストプレーヤーを作成します。
mVideoListPlayer = AliPlayerFactory.createAliListPlayer(mContext);
// ハードデコードを有効にします。
mVideoListPlayer.enableHardwareDecoder(true);
// プレイヤーパラメーターを設定します。
PlayerConfig config = mVideoListPlayer.getConfig();
// ビデオの再生が停止した後にビデオフレームを消去します。 残留フレームを防ぐために、この設定を追加することを推奨します。
config.mClearFrameWhenStop = true;
mVideoListPlayer.setConfig(config);
// Enable loop playback. 一般に、短いビデオはループ再生モードで再生される。
mVideoListPlayer.setLoop(true);
// 自動再生を有効にします。
mVideoListPlayer.setAutoPlay(true);
// プリロードするショートビデオの数を指定します。 この例では、再生されているビデオ、再生されているビデオ、再生されるビデオの3つのビデオをプリロードします。
mVideoListPlayer.setPreloadCount(1);

複数のビデオソースを追加します。
ショートビデオリストプレーヤーは、指定されたURLからのビデオ、またはApsaraVideo VODから指定されたビデオID (VID) のビデオを再生できます。 ApsaraVideo VODからビデオを再生するには、Security Token Service (STS) トークンを使用する必要があります。以下のコードを例として使用します。
```
// ApsaraVideo VODからビデオを追加します。
 mVideoListPlayer.addVid (「ApsaraVideo VODからのビデオのVID」、「ビデオの一意のID」);
// 指定したURLからビデオを追加します。
mVideoListPlayer.addUrl("ビデオのURL" 、"ビデオの一意のID");
```
重要ショートビデオリストプレーヤーは、一意のIDに基づいてビデオを区別します。同じ一意のIDを持つビデオソースを追加すると、予期しないビデオが再生されることがあります。一度にプレーヤーに追加されるビデオソースに一意のIDがあることを確認します。

再生を開始します。

ショートビデオリストプレーヤーは、ビデオを見つけて再生するための次の方法を提供します。以下のコードを例として使用します。

// ビデオを見つけて再生します。
mVideoListPlayer.mo veTo("Unique ID of the video", STS token) // STSトークンを使用して、ApsaraVideo VODから指定されたVIDでビデオを再生します。
mVideoListPlayer.mo veTo("ビデオの一意のID") // 指定されたURLからビデオを再生します。
// リスト内の前のビデオを再生します。
mVideoListPlayer.mo veToPrev("Unique ID of the video", STS token) // STSトークンを使用して、ApsaraVideo VODから指定されたVIDでビデオを再生します。
mVideoListPlayer.mo veToPrev("ビデオの一意のID") // 指定されたURLからビデオを再生します。
// リストの次のビデオを再生します。
mVideoListPlayer.mo veToNext("Unique ID of the video", STS token) // STSトークンを使用して、ApsaraVideo VODから指定されたVIDでビデオを再生します。
mVideoListPlayer.mo veToNext("ビデオの一意のID") // 指定されたURLからビデオを再生します。

プレーヤーのTextureViewオブジェクトを設定します。

ほとんどの短いビデオリストプレーヤーは、TextureViewオブジェクトを使用して、プレーヤーが背景から前景に切り替えられたときに黒い画面の例外を回避します。これにより、ビデオ再生中のユーザー体験が最適化されます。

TextureViewオブジェクトの基本設定を構成します。以下のコードを例として使用します。

TextureView mTextureView = null;
SurfaceTexture mSurfaceTexture = null;
表面mSurface = null;
……
mTextureView = findViewById(R.id.textureView);
mTextureView.setSurfaceTextureListener(new TextureView.SurfaceTextureListener() {
            @Override
            public void onSurfaceTextureAvailable(SurfaceTexture surfaceTexture、int width、int height) {
              // SurfaceTextureオブジェクトをキャッシュして、プレイヤーがバックグラウンドからフォアグラウンドに戻ったときに再利用できるようにします。
                mSurfaceTexture = surfaceTexture;
                mSurface=新しい表面 (表面);
                // 再生サーフェスを設定します。
                    mVideoListPlayer.setSurface(mSurface);
              // ユーザーインターフェイス (UI) をすぐに再描画して更新します。
                    mVideoListPlayer.redraw();
            }
            @Override
            public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
              // 再生画面サイズが変更された直後にUIを再描画して更新します。
                    mVideoListPlayer.redraw();
            }
            @Override
            public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
              // 戻り値がfalseであることを確認します。 戻り値がfalseでない場合、システムはSurfaceTextureオブジェクトをリリースします。
                return false;
            }
            @Override
            public void onSurfaceTextureUpdated(SurfaceTexture surface) {
            }
        });

Apply the TextureView object upon switchback to the foreground from the background.
onResume() メソッドを呼び出して、プレーヤーを背景から前景に戻したときにTextureViewオブジェクトを適用します。以下のコードを例として使用します。
```
public void onResume() {
      ……
      if (mVideoListPlayer != null && mSurface != null) {
            mVideoListPlayer.setSurface(mSurface);
            mVideoListPlayer.redraw();
      }
      ……
}
```

サムネイルを非表示にします。

プレーヤーがビデオの再生を開始すると、ビデオサムネイルが非表示になり、ビデオが表示されます。以下のコードを例として使用します。

mVideoListPlayer.setOnRenderingStartListener(new IPlayer.OnRenderingStartListener() {
            @Override
            public void onRenderingStart() {
               // プレーヤーはビデオの最初のフレームのレンダリングを開始します。 このとき、プレイヤーはサムネイルを非表示にします。
            }
        });

プレイヤーを破壊する。

使用後にプレーヤーを解放する必要があります。そうしないと、メモリリークのバグが発生する可能性があります。以下のコードを例として使用します。

// サーフェスをリリースします。
mVideoListPlayer.setSurface(null);
// プレイヤーが手順4でTextureViewオブジェクトを使用する場合は、キャッシュされたSurfaceTextureオブジェクトをリリースする必要があります。
if (mSurface != null) {
            mSurface.release();
}
if (mSurfaceTexture != null) {
            mSurfaceTexture.release();
}
// プレーヤーを解放します。
mVideoListPlayer.release();

iOSでの主な実装

短いビデオリストプレーヤーを作成します。

短いビデオリストプレーヤーを作成し、必要なパラメータを設定します。以下のコードを例として使用します。

// Required. 短いビデオリストプレーヤーを作成します。
self.listPlayer = [[AliListPlayer alloc]init];
// ハードデコードを有効にします。
self.listPlayer.enableHardwareDecoder = YES;
// ループ再生を有効にします。
self.listPlayer.loop = YES;
// 自動再生を有効にします。
self.listPlayer.autoPlay = YES;
// レンダリングモードを指定します。
self.listPlayer.scalingMode = AVP_SCALINGMODE_SCALEASPECTFIT;
// デリゲートを指定します。
self.listPlayer.de legate = self;
// プリロードするショートビデオの解像度を指定します。
self.listPlayer.stsPreloadDefinition = @ "FD";
// UIビューを設定します。
self.listPlayer.playerView = self.simplePlayScrollView.playView;
// プリロードするショートビデオの数を指定します。 この例では、再生されているビデオ、再生されているビデオ、再生されるビデオの3つのビデオをプリロードします。
mVideoListPlayer.setPreloadCount(1);

複数のビデオソースを追加します。
ショートビデオリストプレーヤーは、指定されたURLのビデオ、またはApsaraVideo VODの指定されたVIDのビデオを再生できます。 ApsaraVideo VODからビデオを再生するには、STSトークンを使用する必要があります。以下のコードを例として使用します。
```
// ApsaraVideo VODからビデオを追加します。
[self.listPlayer addVidSource: ApsaraVideoからのビデオのVID VOD uid:"ビデオの一意のID"];
// 指定したURLからビデオを追加します。
[self.listPlayer addUrlSource:"ビデオのURL" uid: "ビデオの一意のID"];
```
重要ショートビデオリストプレーヤーは、一意のIDに基づいてビデオを区別します。同じ一意のIDを持つビデオソースを追加すると、予期しないビデオが再生されることがあります。一度にプレーヤーに追加されるビデオソースに一意のIDがあることを確認します。

再生を開始します。

ショートビデオリストプレーヤーは、ビデオを見つけて再生するための次の方法を提供します。以下のコードを例として使用します。

// ビデオを見つけて再生します。
[self.listPlayer moveTo:"ビデオの一意のID"]; // 指定されたURLからビデオを再生します。
[self.listPlayer moveTo:"Unique ID of the video" accId:accId accKey:accKey token:token region]; // STSトークンを使用して、ApsaraVideo VODから指定されたVIDでビデオを再生します。
// リスト内の前のビデオを再生します。
[self.listPlayer moveToPrev:"ビデオの一意のID"]; // 指定されたURLからビデオを再生します。
[self.listPlayer moveToPrev:"Unique ID of the video" accId:accId accId accKey:accKey token:token region]; // STSトークンを使用して、ApsaraVideo VODから指定されたVIDでビデオを再生します。
// リストの次のビデオを再生します。
[self.listPlayer moveToNext:"ビデオの一意のID"]; // 指定されたURLからビデオを再生します。
[self.listPlayer moveToNext:"Unique ID of the video" accId:accId accId accKey:accKey token:token region]; // STSトークンを使用して、ApsaraVideo VODから指定されたVIDでビデオを再生します。

プレイリストをスクロールします。

再生を一時停止または再開するには、画面をタップします。以下のコードを例として使用します。

- (void)tap {
    if ([self.de legate respondsToSelector:@ selector(AVPSimplePlayScrollViewTapGestureAction :)]) {
        [self.de legate AVPSimplePlayScrollViewTapGestureAction:self];
    }
}
- (void)AVPSimplePlayScrollViewTapGestureAction :( AVPSimplePlayScrollView *)simplePlayScrollView {
    if (self.playerStatus == AVPStatusStarted) {
        // ビデオが再生されている場合は、ビデオを一時停止します。
        [self.listPlayer一时停止];
    } else if (self.playerStatus == AVPStatusPaused) {
        // ビデオが一時停止されている場合は、ビデオを再生します。
        [self.listPlayer開始];
    }
}

プレイリストをスクロールします。

前のビデオまたは次のビデオをスキップするほど速くプレイリストをスクロールすると、moveToメソッドが呼び出され、指定されたビデオを検索して再生します。以下のコードを例として使用します。

- (void)scrollViewDidEndDecelerating :( UIScrollView *)scrollView {
    CGFloat indexFloat = scrollView.contentOffset.y/self.frame.size.height;
    NSInteger index = (NSInteger)indexFloat;
    .......
      // 次のビデオまでスクロールします。
       if (index - self.currentIndex == 1) {
            if ([self.de legate respondsToSelector:@ selector(AVPSimplePlayScrollView:motoNextAtIndex :)]) {
                [self.de legate AVPSimplePlayScrollView:self motoNextAtIndex:index];
            }
        }
        // 前のビデオまでスクロールします。
        else if (self.currentIndex - index == 1){
            if ([self.de legate respondsToSelector:@ selector(AVPSimplePlayScrollView:motoPreAtIndex :)]) {
                [self.de legate AVPSimplePlayScrollView:self motoPreAtIndex:index];
            }
        }
        // プレイリストを上下にスクロールして、複数のビデオをスキップします。
        else {
            if ([self.de legate respondsToSelector:@ selector(AVPSimplePlayScrollView:scrollViewDidEndDeceleratingAtIndex :)]) {
                [self.de legate AVPSimplePlayScrollView:self scrollViewDidEndDeceleratingAtIndex:index];
            }
        }
}
/**
 プレイリストを上下にスクロールして、複数のビデオをスキップします。
 @ param simplePlayScrollView simplePlayScrollView
 @ paramインデックス現在のビデオから宛先ビデオまでの上向きまたは下向きのカウント。
 * /
- (void)AVPSimplePlayScrollView :( AVPSimplePlayScrollView *)simplePlayScrollView scrollViewDidEndDeceleratingAtIndex :( NSInteger)index {
    // 宛先ビデオを見つけます。
    AVPDemoResponseVideoListModel * model = [self findModelFromIndex:index];
    // moveToメソッドを呼び出して、現在のビデオまでスクロールします。
    [self moveToCurrentModel];
}

サムネイルを非表示にします。

プレーヤーがビデオの再生を開始すると、ビデオサムネイルが非表示になり、ビデオが表示されます。以下のコードを例として使用します。

-(void)onPlayerEvent :( AliPlayer *)player eventType :( AVPEventType)eventType {
    switch (eventType) {
        ケースAVPEventPrepareDone: {
        }
            break;
        ケースAVPEventFirstRenderedStart: {
            // サムネイルを非表示にします。
            [self.simplePlayScrollView showPlayView];
        }
            break;
        default:
            break;
    }
}

プレイヤーを破壊する。
使用後にプレーヤーを解放する必要があります。そうしないと、メモリリークのバグが発生する可能性があります。以下のコードを例として使用します。
```
[self.listPlayer停止];
[self.listPlayer破壊];
self.listPlayer = nil;
```