Web 用 ApsaraVideo Player SDK のオンライン試用版とデモソースコード - ApsaraVideo VOD

このトピックでは、ApsaraVideo Player SDK for Web のオンライン試用の申請方法とデモのソースコードの入手方法について説明します。

デスクトップブラウザ用デモ

ApsaraVideo Player SDK for Web は、視覚化された方法でオンライン試用版を提供しています。オンライン設定ページにアクセスして、試用版をお試しください。基本的な再生機能を構成し、ユーザーインターフェース（UI）を設定できます。構成が完了すると、HTML5 プレーヤーのコードが生成されます。

説明

ストリーミング URL は、リアルタイムメッセージングプロトコル（RTMP）形式ではなく、Flash Video（FLV）形式である必要があります。

モバイルデバイス用デモ

モバイルブラウザ用のデモを入手するには、モバイルデバイスで DingTalk アプリを使用して、次の QR コードをスキャンします。

重要

Android デバイスでは、WeChat と QQ の内部ブラウザが、お客様の承認または認識なしに ApsaraVideo Player SDK の設定を変更する場合があります。この場合、ApsaraVideo Player SDK の特定の機能は使用できません。

二维码

機能ソースコード

Aliplayer Web サイトの「機能」ページで、ApsaraVideo Player SDK for Web の機能を使用し、対応するソースコードを表示できます。基本機能、コンポーネント、高度な機能の詳細については、機能ページをご覧ください。功能展示

Vue 用デモソースコード

ApsaraVideo Player SDK for Web は、SDK を Vue フレームワークと統合するためのデモソースコードを提供しています。

デモの詳細については、「Vue ベースの ApsaraVideo Player のデモ」をご参照ください。

React デモのソースコード

ApsaraVideo Player SDK for Web は、SDK を React フレームワークと統合するためのデモソースコードを提供しています。

デモの詳細については、「React ベースの ApsaraVideo Player のデモ」をご参照ください。

WeChat ミニプログラム

WeChat ミニプログラムには、DOM API と BOM API がありません。この場合、jQuery や Zepto など、フロントエンド開発で一般的に使用される特定のライブラリは、WeChat ミニプログラムにロードできません。同様に、ブラウザのサポートに依存する ApsaraVideo Player SDK for Web は、WeChat ミニプログラムでは実行できません。したがって、WeChat ミニプログラムでビデオを再生するには、WeChat ミニプログラムによって提供されるデフォルトのビデオコンポーネントを使用する必要があります。詳細については、vod-mini-program をご覧ください。

uni-app

次のコードを使用して、プレーヤーを uni-app に統合できます。Web 用 ApsaraVideo Player SDK はブラウザ関連の API に依存するため、ネイティブアプリまたはミニアプリとして実行するようにコンパイルすることはできません。

コードを表示

<template>
    <view class="content">
        <view id="player"></view>
    </view>
</template>
<script>
 import Aliplayer from 'aliyun-aliplayer';
 import "aliyun-aliplayer/build/skins/default/aliplayer-min.css";
 export default {
      data() {
         return {}
      },
      mounted() {
         this.player = this.createPlayer();
      },
      methods: {
        createPlayer: () => {
          return new Aliplayer({
               id: 'player',
               source: 'https://player.alicdn.com/video/aliyunmedia.mp4',
               width: '800px',
               autoSize: true,
          });
      },
         // コンポーネントをインポートするには、まず await loadComponent() を呼び出してから、プレーヤーを初期化します。
     loadComponent() {
          return new Promise((resolve, reject) => {
               const s_tag = document.createElement('script');
               s_tag.type = 'text/javascript';
               // コンポーネントの .js ファイルをダウンロードし、プロジェクトの /static/ フォルダに配置します。
              // ダウンロード URL: https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.1.2.min.js
               s_tag.src = './static/aliplayercomponents-1.1.2.min.js';
               s_tag.charset = 'utf-8';
               s_tag.onload = () => {
                   resolve();
               }
                document.body.appendChild(s_tag);
          });
        }
     }
}
</script>
<style>
 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }
</style>