ApsaraVideo VOD:高度な機能

短い動画のリスト再生を有効にするには、複数のAliPlayerインスタンスを作成することを推奨します。 次の項目では、AliListPlayerの制限について説明します。 詳細については、「短いビデオリストプレーヤー」をご参照ください。

• AliListPlayerは、V5.4.5.0より前のバージョンのApsaraVideo Player SDK for AndroidでのM3U8ファイルの再生をサポートしていません。 ApsaraVideo Player SDK for Android V5.4.5.0以降では、ローカルキャッシュ機能を有効にしてM3U8ファイルを再生する必要があります。

1. プレイヤーを作成します。

   AliPlayerFactoryクラスを使用してAliListPlayerインスタンスを作成します。 サンプルコード：

   AliListPlayer aliyunListPlayer;
   .....
   aliyunListPlayer = AliPlayerFactory.createAliListPlayer(getApplicationContext());
   aliyunListPlayer.setTraceId("traceId"); // The trace ID is the unique identifier of the device or the user. In most cases, the value is the International Mobile Equipment Identity (IMEI) or the Identifier for Advertisers (IDFA) of the device.

2. オプション： リスナーを設定します。

   短いビデオリストプレーヤーを作成する場合、リスナーはオプションです。 ただし、リスナーを設定しないと、プレーヤーに関連するイベント (再生の失敗や進行状況など) の通知を受け取ることができません。 OnPreparedListener、OnErrorListener、OnCompletionListener、OnLoadingStatusListener、およびOnInfoListenerのリスナーを設定することを推奨します。

   表示コード

   aliyunListPlayer.setOnCompletionListener(new IPlayer.OnCompletionListener() {
       @Override
       public void onCompletion() {
           // Listen for the end of playback.
       }
   });
   aliyunListPlayer.setOnErrorListener(new IPlayer.OnErrorListener() {
       @Override
       public void onError(ErrorInfo errorInfo) {
           // Listen for the occurrence of errors.
       }
   });
   aliyunListPlayer.setOnPreparedListener(new IPlayer.OnPreparedListener() {
       @Override
       public void onPrepared() {
           // Listen for successful preparation.
       }
   });
   aliyunListPlayer.setOnVideoSizeChangedListener(new IPlayer.OnVideoSizeChangedListener() {
       @Override
       public void onVideoSizeChanged(int width, int height) {
           // Listen for the change of video resolution.
       }
   });
   aliyunListPlayer.setOnRenderingStartListener(new IPlayer.OnRenderingStartListener() {
       @Override
       public void onRenderingStart() {
           // Listen for the display of the first frame.
       }
   });
   aliyunListPlayer.setOnInfoListener(new IPlayer.OnInfoListener() {
       @Override
       public void onInfo(int type, long extra) {
           // Listen for other events. The type parameter contains multiple values that indicate various events, such as the start of loop playback, buffer position, current playback position, and the start of autoplay.
       }
   });
   aliyunListPlayer.setOnLoadingStatusListener(new IPlayer.OnLoadingStatusListener() {
       @Override
       public void onLoadingBegin() {
           // Listen for the start of buffering. 
       }
       @Override
       public void onLoadingProgress(int percent, float kbps) {
           // Listen for the buffering progress.
       }
       @Override
       public void onLoadingEnd() {
           // Listen for the end of buffering.
       }
   });
   aliyunListPlayer.setOnSeekCompleteListener(new IPlayer.OnSeekCompleteListener() {
       @Override
       public void onSeekComplete() {
           // Listen for the end of seeking.
       }
   });
   aliyunListPlayer.setOnSubtitleDisplayListener(new IPlayer.OnSubtitleDisplayListener() {
       @Override
       public void onSubtitleShow(long id, String data) {
           // Listen for the display of subtitles.
       }
       @Override
       public void onSubtitleHide(long id) {
           // Listen for the hiding of subtitles.
       }
   });
   aliyunListPlayer.setOnTrackChangedListener(new IPlayer.OnTrackChangedListener() {
       @Override
       public void onChangedSuccess(TrackInfo trackInfo) {
           // Listen for the successful switching between audio and video streams or between resolutions.
       }
       @Override
       public void onChangedFail(TrackInfo trackInfo, ErrorInfo errorInfo) {
           // Listen for the failed switching between audio and video streams or between resolutions.
       }
   });
   aliyunListPlayer.setOnStateChangedListener(new IPlayer.OnStateChangedListener() {
       @Override
       public void onStateChanged(int newState) {
           // Listen for the change of player status.
       }
   });
   aliyunListPlayer.setOnSnapShotListener(new IPlayer.OnSnapShotListener() {
       @Override
       public void onSnapShot(Bitmap bm, int with, int height) {
           // Listen for the capture of snapshots.
       }
   });

3. プリロードするビデオの数を指定します。

   ビジネス要件に基づいて、プリロードするビデオの数を指定できます。 これにより、起動時間を短縮できます。 サンプルコード：

   // Specify the number of videos that you want to preload. The total number of loaded videos equals one plus twice the specified number. 
   aliyunListPlayer.setPreloadCount(int count);

4. 複数の再生ソースを追加または削除します。

   リスト再生は、VidおよびUrlSourceに基づくビデオ再生をサポートします。 VidStsまたはVidPlayAuthを使用して、Vidに基づいてビデオを再生できます。 Urlはビデオの再生URLです。 サンプルコード：

   • Url: 再生URLは、ApsaraVideo VODまたはサードパーティのビデオオンデマンド (VOD) プラットフォームのオーディオファイルまたはビデオファイルのURLにすることができます。 GetPlayInfo操作を呼び出して、ApsaraVideo VODのオーディオファイルまたはビデオファイルの再生URLを取得できます。 ApsaraVideo VOD SDKを使用してこの操作を呼び出すことを推奨します。 これにより、複雑な署名計算から解放されます。 GetPlayInfo操作の詳細については、OpenAPI Explorerをご参照ください。

   • Vid: オーディオまたはビデオID。 IDを取得するには、ApsaraVideo VODコンソールにログインし、左側のナビゲーションウィンドウで [メディアファイル]> [オーディオ /ビデオ] を選択します。 または、SearchMedia操作を呼び出すこともできます。

   // Add a Vid playback source.
   aliyunListPlayer.addVid(String videoId, String uid);
   // Add a UrlSource playback source.
   aliyunListPlayer.addUrl(String url, String uid);
   // Remove a playback source.
   aliyunListPlayer.removeSource(String uid);

   説明

   uidパラメータは、ビデオの一意のIDを示す。 一意のIDを使用してビデオを識別できます。 同じ一意のIDを持つビデオは同じと見なされます。 プレーヤーが指定していないビデオを再生する場合は、複数のビデオに同じIDを指定しているかどうかを確認します。 一意のIDを任意の文字列に設定できます。

5. ビューを設定します。

   SurfaceViewまたはTextureViewメソッドを呼び出して、ビューを設定できます。

   • 次のサンプルコードでは、SurfaceViewを使用してビューを構成する方法について説明します。

     表示コード

     SurfaceView surfaceView = findViewById(R.id.surface_view);
     surfaceView.getHolder().addCallback(new SurfaceHolder.Callback() {
         @Override
         public void surfaceCreated(SurfaceHolder holder) {
             aliyunListPlayer.setSurface(holder.getSurface());
         }
     
         @Override
         public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
             aliyunListPlayer.surfaceChanged();
         }
     
         @Override
         public void surfaceDestroyed(SurfaceHolder holder) {
             aliyunListPlayer.setSurface(null);
         }
     });

   • 次のサンプルコードでは、TextureViewを使用してビューを構成する方法について説明します。

     表示コード

     TextureView textureView = findViewById(R.id.texture_view);
     textureView.setSurfaceTextureListener(new TextureView.SurfaceTextureListener() {
         @Override
         public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
             aliyunListPlayer.setSurface(new Surface(surface));
         }
     
         @Override
         public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {
             aliyunListPlayer.surfaceChanged();
         }
     
         @Override
         public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
             aliyunListPlayer.setSurface(null);
             return false;
         }
     
         @Override
         public void onSurfaceTextureUpdated(SurfaceTexture surface) {
     
         }
     });

6. ビデオソースを再生します。

   1つ以上の再生ソースを追加して自動再生を有効にしたら、moveToを呼び出して、指定した再生ソースからコンテンツを再生します。 サンプルコード：

   表示コード

   // Enable autoplay.
   aliyunListPlayer.setAutoPlay(true);
   
   // Call the following method for URL-based playback.
   aliyunVodPlayer.moveTo(String uid);
   // Call the following method for Vid-based playback. You must obtain the Security Token Service (STS) token and AccessKey pair before you call this method. For more information, see Create a RAM role and grant temporary access permissions to the role by using STS. 
   aliyunVodPlayer.moveTo(String uid, StsInfo info);
   // Call the following method for Vid-based playback. You must obtain a playback credential for the video before you call this method and specify the PlayAuthInfo parameter when you call this method. 
   aliyunVodPlayer.moveTo(String uid, PlayAuthInfo info);

7. リスト内の前または次のビデオを再生します。

   • moveToを呼び出してビデオを再生した後、moveToPrevを呼び出して前のビデオを再生するか、moveToNextを呼び出して次のビデオを再生します。 サンプルコード:

     説明

     movetoまたはmoveToNextを呼び出して同じビューでビデオソースを切り替えると、画像が点滅し、画面が黒くなります。 この場合、PlayerConfigのmClearFrameWhenStopをfalseに設定し、listPlayerを呼び出してプレーヤーを初期化するときにsetConfigを呼び出して設定を適用することを推奨します。

     表示コード

     // Enable autoplay.
     aliyunListPlayer.setAutoPlay(true);
     
     // Play the next video.   You can call this method only for URL-based playback. The method is invalid for Vid-based playback. 
     aliyunVodPlayer.moveToNext();
     // Play the previous video. You can call this method only for URL-based playback. The method is invalid for Vid-based playback. 
     aliyunVodPlayer.moveToPrev();
     // Play the next video. You can call this method only for Vid-based playback. 
     aliyunVodPlayer.moveToNext(StsInfo info);
     // Play the previous video. You can call this method only for Vid-based playback. 
     aliyunVodPlayer.moveToPrev(StsInfo info);
     // Play the next video. You can call this method only when you use playback credentials for Vid-based playback. 
     aliyunVodPlayer.moveToNext(PlayAuthInfo info);
     // Play the previous video. You can call this method only when you use playback credentials for Vid-based playback. 
     aliyunVodPlayer.moveToPrev(PlayAuthInfo info);

   • MoveToまたはMoveToNextメソッドを呼び出す前に、再生資格情報を取得します。 ビデオIDを使用して再生資格情報を申請できます。

     説明

     VidPlayAuthに基づいてビデオを再生するには、ビデオIDを使用して再生資格情報を申請する必要があります。

     表示コード

     requestAuth(source.getVideoId(), new OnRequestAuthResultListener() {
         @Override
         public void onResult(VidAuth vidAuth) {
             mVideoListPlayer.moveToNext(createVidAuth(vidAuth));
         }
     });
     
     private PlayAuthInfo createVidAuth(VidAuth vidAuth) {
         if (vidAuth == null) {
             return new PlayAuthInfo();
         }
         PlayAuthInfo playAuthInfo = new PlayAuthInfo();
         playAuthInfo.setPlayAuth(vidAuth.getPlayAuth());
         return playAuthInfo;
     }

8. オプション：プレレンダリング機能を有効にして、スムーズなビデオ切り替えを実現します。

   説明

   この機能は、ApsaraVideo Player SDK for Android V5.5.2.0以降でのみサポートされています。 この機能を使用するには、ローカルキャッシュを有効にする必要があります。 詳細については、「ローカルキャッシュの設定」をご参照ください。

   getPreRenderPlayerおよびmoveToNextWithPrerendered操作は、Android V5.5.2.0以降のApsaraVideo Player SDKで提供されています。 これにより、ビデオ切り替えの滑らかさを向上させることができます。 次のセクションでは、さまざまなバージョンのApsaraVideo Player SDK for Androidを統合するときの操作の使用方法について説明します。

   ApsaraVideo Player SDK for Android V5.5.2.0以降の統合

   getPreRenderPlayer操作を使用します。 サンプルコード：

   表示コード

   // You can use the getPreRenderPlayer operation only when you use the moveToNext operation. The local caching feature must be enabled. 
   IPlayer preRenderPlayer = listPlayer.getPreRenderPlayer();
   if (preRenderPlayer != null) {
       // Call the setSurface operation.
       preRenderPlayer.setSurface(surface);
     preRenderPlayer.start();
     listPlayer.setSurface(null);
     // Call the moveToNextWithPrerendered operation instead of the moveToNext operation if you use STS-based playback.
     listPlayer.moveToNextWithPrerendered(createStsInfo(source));
   }

   ApsaraVideo Player SDK for Androidが以前のバージョンからV5.5.2.0以降に更新されました

   以前のバージョンのApsaraVideo Player SDK for Androidでコードを変更する必要があります。 次の手順では、コードを変更する方法について説明します。

   1. レンダリングビューに関連するロジックを変更します。

      以前のバージョンのApsaraVideo Player SDK for Androidは、グローバルレンダービューを使用しています。 ビデオソースを切り替えると、以前のレンダリングビューがレイアウトから削除され、新しいレンダリングビューが追加されます。 ApsaraVideo Player SDK for Android V5.5.2.0以降は、複数のレンダリングビューをサポートしています。 RecyclerView.ViewHolderレイアウトに複数のビューを追加できます。 これにより、ビデオを切り替える前に次のビデオソースをプリロードできます。 これにより、スムーズなビデオ切り替えが保証されます。 以前のバージョンのApsaraVideo Player SDK for Androidからレンダリングビューのコードを削除し、新しいバージョンのApsaraVideo Player SDK for Androidに複数のレンダリングビューのコードを追加する必要があります。 サンプルコード：

      表示コード

      /*
      Delete the following code.
          The following lines of code of the earlier version of ApsaraVideo Player SDK for Android configure a render view. The following code adds a render view to FrameLayout and removes or adds mPlayerViewContainer when you switch the video source. 
      */
      private void initPlayer() {
          //...
          mPlayerViewContainer = View.inflate(getContext(), R.layout.layout_player_view, null);
          FrameLayout frameLayout = mPlayerViewContainer.findViewById(R.id.framelayout);
          FrameLayout.LayoutParams params = new FrameLayout.LayoutParams(FrameLayout.LayoutParams.MATCH_PARENT,
          FrameLayout.LayoutParams.MATCH_PARENT);
          View renderView = createRenderView(Common.RENDER_VIEW_NAME);
          frameLayout.addView(renderView, 0, params);
          //...
      }
      
      /*
      Add or modify the following code to add multiple render views.
          Modify the layout of items in RecyclerView and ViewHolder.
      */
      
      public final class MyHolder extends RecyclerView.ViewHolder {
          //...
          private Surface mSurface;
          MyHolder(@NonNull View itemView) {
              super(itemView);
              //...
              TextureView mTextureView = itemView.findViewById(R.id.texture_view);
              mTextureView.setSurfaceTextureListener(new TextureView.SurfaceTextureListener() {
                  @Override
                  public void onSurfaceTextureAvailable(SurfaceTexture surface, int width, int height) {
                      mSurface = new Surface(surface);
                  }
      
                  @Override
                  public void onSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height) {}
      
                  @Override
                  public boolean onSurfaceTextureDestroyed(SurfaceTexture surface) {
                      mSurface = null;
                      return false;
                  }
      
                  @Override
                  public void onSurfaceTextureUpdated(SurfaceTexture surface) {}
              });
          }
          //...
      
          // Add the getSurface operation. This operation is publicly accessible.
          public Surface getSurface() {
              return mSurface;
          }
      }

      次のサンプルコードは、RecyclerViewのアイテムのレイアウトを変更する方法の例を示しています。

      表示コード

      <?xml version="1.0" encoding="utf-8"?>
      <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:app="http://schemas.android.com/apk/res-auto"
          android:id="@+id/root_view"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:background="@android:color/black">
      
          <TextureView
              android:id="@+id/texture_view"
              android:layout_width="match_parent"
              android:layout_height="match_parent" />
      
      <!  -- Delete the thumbnail. If a black screen appears, you can retain the logic related to the thumbnail.   -->
      <!--    <FrameLayout-->
      <!--        android:id="@+id/player_view"-->
      <!--        android:layout_width="match_parent"-->
      <!--        android:layout_height="match_parent"-->
      <!--        android:clickable="false"-->
      <!--        android:clipChildren="false"-->
      <!--        android:focusable="false">-->
      
      <!--        <ImageView-->
      <!--            android:id="@+id/img_thumb"-->
      <!--            android:layout_width="match_parent"-->
      <!--            android:layout_height="match_parent"-->
      <!--            android:layout_gravity="center"-->
      <!--            android:adjustViewBounds="true"-->
      <!--            android:clickable="false"-->
      <!--            android:focusable="false"-->
      <!--            android:scaleType="fitXY" />-->
      
      <!--    </FrameLayout>-->
      
      </FrameLayout>

   2. ビデオソースを切り替えるロジックを変更します。

      ApsaraVideo Player SDK for Android V5.5.2.0以降では、moveToNextを呼び出すとpreRenderPlayerメソッドが呼び出されます。 レンダリングビューに対して個別のロジックを構成する必要があります。 moveToNext、moveToPre、およびmoveTo操作のロジックは異なります。 サンプルコード：

      表示コード

      /*
          Note: mQuickPlayer is an instance of the AlivcQuickPlayer class and AlivcQuickPlayer encapsulates the ListPlayer operation. 
      */
      private void startPlay(int position, boolean isInitComplete) {
          //...
          // Query the ViewHolder instance based on the value of the position parameter.
          LittleVideoListAdapter.MyHolder holder = (LittleVideoListAdapter.MyHolder) recycler.findViewHolderForLayoutPosition(position);
      
          //...
      
          // 1. Specify Surface before you call the moveToPre operation.
          if (holder != null) {
              mQuickPlayer.setSurface(holder.getSurface());
          }
          mQuickPlayer.moveToPrev(video, position, mVideoSourceType);
      
          // 2. Specify Surface before you call the moveTo operation.
          if (holder != null) {
              mQuickPlayer.setSurface(holder.getSurface());
          }
          // Use mQuickPlayer.startPlay to call the moveTo operation in ApsaraVideo Player SDK.
          mQuickPlayer.startPlay(video, position, mVideoSourceType);
      
          // 3. Add a parameter to pass the value of Surface when you call the moveToPre operation.
          mQuickPlayer.moveToNext(video, position, mVideoSourceType, holder.getSurface());
      
          //...
      }

      次のサンプルコードは、AlivcQuickPlayerクラスのロジックを変更する方法の例を示しています。

      表示コード

      // Modify the logic of the moveToPre operation.
      public void moveToPrev(AlivcVideoInfo.Video source, final int position, VideoSourceType videoSourceType) {
          //...
          // Add the following code to your SDK.
          mVideoListPlayer.clearScreen();
          if (videoSourceType == VideoSourceType.TYPE_STS) {
              mVideoListPlayer.moveToPrev(createStsInfo(source));
          } else {
              mVideoListPlayer.moveToPrev();
          }
      }
      
      // Add a reload method for the moveToNext operation.
      public void moveToNext(AlivcVideoInfo.Video source, int position, VideoSourceType videoSourceType, Surface surface) {
          //...
          // Obtain and use the preRenderPlayer instance for playback when you call the moveToNext operation.
          IPlayer preRenderPlayer = mVideoListPlayer.getPreRenderPlayer();
          if (preRenderPlayer != null) {
              preRenderPlayer.clearScreen();
              preRenderPlayer.setSurface(surface);
              preRenderPlayer.start();
              mVideoListPlayer.setSurface(null);
          } else {
              mVideoListPlayer.clearScreen();
              mVideoListPlayer.setSurface(surface);
          }
      
          // Configure the STS-based playback.
          if (videoSourceType == VideoSourceType.TYPE_STS) {
              // If preRenderPlayer exists, call moveToNextWithPrerendered to play videos.
              if (preRenderPlayer != null) {
                  mVideoListPlayer.moveToNextWithPrerendered(createStsInfo(source));
              } else {
                  mVideoListPlayer.moveToNext(createStsInfo(source));
              }
          } else {
              // Configure the URL-based playback.
              if (preRenderPlayer != null) {
                  mVideoListPlayer.moveToNextWithPrerendered();
              } else {
                  mVideoListPlayer.moveToNext();
              }
          }
      }

   3. オプション： プレイリスト再生のロジックを変更します。

      プレイリストの再生のロジックを変更して、次のビデオのビューの半分が表示されたときに、次のビデオの再生を開始することができます。 PagerLayoutManagerクラスのコードを変更して、次のビデオのビューの半分がRecyclerViewに表示されたときにビデオソースを切り替えます。 サンプルコード：

      表示コード

      recyclerView.addOnScrollListener(new OnScrollListener() {
          private int measuredHeight;
          private int mScrollDiff;
          @Override
          public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
              super.onScrollStateChanged(recyclerView, newState);
      
              if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
                  measuredHeight = recyclerView.getMeasuredHeight();
                  mScrollDiff = 0;
              }
      
              if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                  mScrollDiff = 0;
                  View viewIdle = mPagerSnapHelper.findSnapView(PagerLayoutManager.this);
                  if (viewIdle == null) {
                      return;
                  }
                  int positionIdle = getPosition(viewIdle);
                  if (mOnViewPagerListener != null && getChildCount() == 1 && mOldPosition != positionIdle) {
                      mOnViewPagerListener.onPageSelected(positionIdle, positionIdle == getItemCount() - 1, viewIdle);
                      mOldPosition = positionIdle;
                  }
              }
          }
      
          @Override
          public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
              super.onScrolled(recyclerView, dx, dy);
              if (measuredHeight > 0 && mOnViewPagerListener != null) {
                  mScrollDiff += dy;
                  changeVideoAfterScrolled(recyclerView, dy >= 0);
              }
          }
      
          private void changeVideoAfterScrolled(RecyclerView recyclerView, boolean isNext) {
              if (Math.abs(mScrollDiff) >= measuredHeight / 2) {
                  View snapView = mPagerSnapHelper.findSnapView(PagerLayoutManager.this);
                  if (snapView != null) {
                      int position = getPosition(snapView);
                      if (mOldPosition != position) {
                          if (isNext) {
                              mOnViewPagerListener.onPageHideHalf(position - 1);
                          } else {
                              mOnViewPagerListener.onPageHideHalf(position + 1);
                          }
                          mOnViewPagerListener.onPageSelected(position, false, snapView);
                          mOldPosition = position;
                          recyclerView.smoothScrollToPosition(position);
                          mScrollDiff = 0;
                      }
                  }
              }
          }
      });