Web播放器SDK的線上體驗Demo及Demo源碼 - ApsaraVideo VOD

本文介紹基於阿里雲Web播放器SDK的線上體驗方式，並提供Demo源碼。

案頭端Demo體驗

Web播放器SDK提供可視化的線上體驗。您可通過線上配置訪問。線上配置提供基礎的播放配置、樣式配置，支援產生HTML5、Flash兩套代碼。

說明

H5模式下，當採用直播的地址播放方式時，播放地址僅支援FLV格式，不支援RTMP格式。

移動端Demo體驗

使用DingTalkAPP，掃描以下二維碼體驗Web播放器SDK移動端Demo。

重要

Android手機上微信、QQ等瀏覽器存在劫持播放器的情況下，有些功能會失效。

二維碼

功能Demo源碼

Web播放器提供線上功能展示，並在功能展示頁面同步展現代碼實現。詳細的功能列表（基礎功能、組件及進階功能）及範例程式碼，請參見功能展示。

Vue Demo源碼

提供基於Vue的播放器Demo源碼，方便開發人員使用。

Demo地址請參見阿里雲播放器 Vue Demo。

微信小程式

微信小程式缺少相關的DOM API和BOM API，這一區別導致了前端開發非常熟悉的一些庫，例如 jQuery、Zepto等，在微信小程式裡不能運行。同理Web播放器SDK也是基於瀏覽器環境的，在微信小程式裡不能運行，因此需要使用小程式內建的Video組件去播放視頻，詳情請參見ApsaraVideo for VOD微信小程式Demo。

uni-app

uni-app基於vue2、vue3前端文法開發應用，提供多平台跨端相容。但由於Web播放器SDK依賴瀏覽器原生WebAPI，因此對編譯的平台有所限制，目前僅支Web端和app-vue的renderjs模式。

Web播放器SDK僅支援通過<script>標籤方式引入。uni-app可以通過動態添加標籤來引入，程式碼範例如下：

展開查看代碼

<template>
  <view class="container">
    <p>VUE2 Demo</p>
    <div id="url-player-test"></div>
  </view>
</template>
<script>
  export default {
    mounted() {
      // 在適合的生命週期，通過script和link標籤引入播放器sdk、css
      this.loadWebPlayerSDK().then(() => {
        // 如果需要使用自訂群組件，開啟以下注釋
        // 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("載入組件失敗", e) })
      }).catch((e) => {
        console.log("載入播放器SDK失敗", e);
      });
    },
    data() {
      return {}
    },
    methods: {
      loadWebPlayerSDK() {
        return new Promise((resolve, reject) => {
          const s_tag = document.createElement('script'); // 引入播放器js
          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'); // 引入播放器css
          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';
          // 需要先下載組件 js 檔案，放到專案 /static/ 目錄下
          // 下載地址：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>