ApsaraVideo Player SDK for Webのデモとソースコード - ApsaraVideo VOD

このトピックでは、ApsaraVideo Player SDK for Webのオンライントライアルを申請し、デモソースコードを取得する方法について説明します。

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

ApsaraVideo Player SDK for Webは、視覚化されたオンライントライアルを提供します。 [オンライン設定] ページでオンライントライアルを申請できます。基本的な再生機能を設定し、UIレイアウトをオンラインで設定できます。設定が完了すると、HTML5プレーヤーとFlashプレーヤーの両方のコードが生成されます。

説明

HTML5プレーヤーを使用してライブストリームを再生する場合、ストリーミングURLはFlash Video (FLV) 形式である必要があります。リアルタイムメッセージングプロトコル (RTMP) 形式のストリーミングURLは使用できません。

モバイルデバイスのデモ

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

重要

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

二维码

特徴ソースコード

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

Vueのデモソースコード

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

GitHubに移動してデモをダウンロードします。

WeChatミニプログラム

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

ユニアプリ

uni-appは、Vue 2とVue 3を使用してアプリケーションを開発するフレームワークです。複数のプラットフォームにまたがる複数のデバイスと互換性があります。 ApsaraVideo Player SDK for WebはブラウザのネイティブWeb APIに依存しており、webクライアントとrenderjsに基づくapp-vueでのみ実行できます。

スクリプトタグのみを使用して、ApsaraVideo Player SDK for Webを統合できます。タグを動的に追加して、アプリを統合できます。サンプルコード：

コードを表示

<template>
  <view class="container">
    <p>VUE2 Demo</p>
    <div id="url-player-test"></div>
  </view>
</template>
<script>
  export default {
    mounted() {
      // Use the script and link tags to add the CSS file and ApsaraVideo Player SDK for Web package to uni-app.
      this.loadWebPlayerSDK().then(() => {
        // To use custom components, uncomment the following line:
        // this.loadComponent().then(() => {
        let player = new Aliplayer({
          id: "url-player-test",
          source: "//player.alicdn.com/video/aliyunmedia.mp4",
          width: "100%",
          height: "100%",
        }, function (player) {
        });
        player.one('canplay', function () {
          console.log('canplay', player.tag);
          player.tag.play();
        });
        // }).catch((e) => { console.log("Component loading failed", e) })
      }).catch((e) => {
        console.log("Loading of ApsaraVideo Player SDK failed.", e);
      });
    },
    data() {
      return {}
    },
    methods: {
      loadWebPlayerSDK() {
        return new Promise((resolve, reject) => {
          const s_tag = document.createElement('script'); // Add the .js file of the player.
          s_tag.type = 'text/javascript';
          s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js';
          s_tag.charset = 'utf-8';
          s_tag.onload = () => {
            resolve();
          }
          document.body.appendChild(s_tag);
          const l_tag = document.createElement('link'); // Add the .css file of the player.
          l_tag.rel = 'stylesheet';
          l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css';
          document.body.appendChild(l_tag);
        });
      },
      loadComponent() {
        return new Promise((resolve, reject) => {
          const s_tag = document.createElement('script');
          s_tag.type = 'text/javascript';
          // Download the component .js file and store the file in the /static/ directory of the project.
          // Download URL: https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.9.min.js
          s_tag.src = './static/aliplayercomponents-1.0.9.min.js';
          s_tag.charset = 'utf-8';
          s_tag.onload = () => {
            resolve();
          }
          document.body.appendChild(s_tag);
        });
      }
    }
  }
</script>
<style>
  .container {
    padding: 20px;
    font-size: 14px;
    height: 800px;
  }
</style>