阿里云Aliplayer在VueJS中使用方法，包括插件组件的使用

阿里云播放器Alipalayer官方的展示和配置详见：https://player.alicdn.com/aliplayer/presentation/index.html

官方的展示使用的并不是vue的写法，这边整理了了一下vue的写法，如果是配置方面的，可以把配置的代码复制过来直接时候，另外也考虑到了插件组件的使用，也是集成进去了。

示例中使用了2.9.20版本的js和css，使用了ali的CDN引用的，组件使用的是1.0.8的版本，这个是没有CDN的，需要直接从github上下载

https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.8.min.js

集成了自定义的组件，示例中使用了一个图片广告插件，供参考。详细的官方SDK介绍，请参考：https://help.aliyun.com/document_detail/125579.html

可以使用source(例如mp4的url的方式)或者使用vid+playauth的方式加密播放。

下面放出干货代码 Player.vue（复制过来就可以使用，大部分使用都加上了注释）:

<!--
  - Copyright (c) 2022.
  -
  - Unless required by applicable law or agreed to in writing, software
  - distributed under the License is distributed on an "AS IS" BASIS,
  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  - See the License for the specific language governing permissions and
  - limitations under the License.
  -
  -->

<template>
  <div>
    <div class="prism-player" :id="playerId" :style="playStyle"></div>

    <button @click="buttonClicked">直接播放地址测试</button>
    <button @click="buttonClicked2">Vid+playAuth播放测试</button>

  </div>
</template>

<script>
// 组件从这里下载：https://github.com/aliyunvideo/AliyunPlayer_Web/blob/master/customComponents/dist/aliplayer-components/aliplayercomponents-1.0.8.min.js
import './aliplayercomponents-1.0.8.min'
export default {
  name: "Player",

  data() {
    return {
      playerId: "aliplayer_" + Math.random().toString(36).substr(2),
      scriptTagStatus: 0,
      isReload: false,
      player: null,
      playStyle:[]
    }
  },
  created() {
    if (window.Aliplayer !== undefined) {
      // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
      this.scriptTagStatus = 2;
      this.initAliplayer();
    } else {
      // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
      this.insertScriptTag();
    }
  },

  mounted() {
    if (window.Aliplayer !== undefined) {
      // 如果全局对象存在，说明编辑器代码已经初始化完成，直接加载编辑器
      this.scriptTagStatus = 2;
      this.initAliplayer();
    } else {
      // 如果全局对象不存在，说明编辑器代码还没有加载完成，需要加载编辑器代码
      this.insertScriptTag();
    }

  },
  methods: {
    buttonClicked() {
      console.log('button1 clicked');
      var playerInfo = {};
      playerInfo.source = '//player.alicdn.com/video/editor.mp4';
      this.reloadPlayer(playerInfo, player => {
        // 测试监听ready事件后播放
        player.on('ready',(e)=> player.play());
      })
    },
    buttonClicked2() {
      console.log('button2 clicked');
      var playerInfo = {};
      playerInfo.vid='AAABBB';
      playerInfo.playauth='XXXYYY';
      this.reloadPlayer(playerInfo, player => {
        // 测试监听ready事件后播放
        player.on('ready',(e)=> player.play());
      })

    },
    insertScriptTag() {
      const _this = this;
      let playerScriptTag = document.getElementById("playerScriptTag");
      // 如果这个tag不存在，则生成相关代码tag以加载代码
      if (playerScriptTag === null) {
        playerScriptTag = document.createElement("script");
        playerScriptTag.type = "text/javascript";
        playerScriptTag.src = "https://g.alicdn.com/de/prismplayer/2.9.20/aliplayer-min.js"; // alipplayer的JS代码，如果有新的版本可以更换，最底下还有CSS代码，也可以根据版本号更换
        playerScriptTag.id = "playerScriptTag";
        let s = document.getElementsByTagName("head")[0];
        s.appendChild(playerScriptTag);
      }
      if (playerScriptTag.loaded) {
        _this.scriptTagStatus++;
      } else {
        playerScriptTag.addEventListener("load", () => {
          _this.scriptTagStatus++;
          playerScriptTag.loaded = true;
          _this.initAliplayer();
        });
      }

      _this.initAliplayer();
    },
    initAliplayer(playInfo, callback) {
      if(!playInfo) {
        playInfo = {};
      }
      const _this = this;
      // scriptTagStatus 为 2 的时候，说明两个必需引入的 js 文件都已经被引入，且加载完成
      if (_this.scriptTagStatus === 2 && (_this.player === null || _this.reloadPlayer)) {
        _this.player && _this.player.dispose();
        // console.log(document.querySelector("#" + _this.playerId));

        // document.querySelector("#" + _this.playerId).innerHTML = "";
        // Vue 异步执行 DOM 更新，这样一来代码执行到这里的时候可能 template 里面的 script 标签还没真正创建
        // 所以，我们只能在 nextTick 里面初始化 Aliplayer
        _this.$nextTick(() => {
          _this.player = window.Aliplayer({
            id: this.playerId,

            autoplay: playInfo.autoplay?playInfo.autoplay:false,

            source: playInfo.source,
            cover: playInfo.cover,
            vid : playInfo.vid,
            playauth : playInfo.playauth,
            // 其他需要的自己定义，可以从https://player.alicdn.com/aliplayer/presentation/index.html?type=cover上选好了配置后，相应的复制过来

            // 图片广告组件测试
            components: [{
              name: 'PauseADComponent',
              type: AliPlayerComponent.PauseADComponent,
              args: ['https://img.alicdn.com/tfs/TB1byi8afDH8KJjy1XcXXcpdXXa-1920-514.jpg', 'https://promotion.aliyun.com/ntms/act/videoai.html']
            }]
          });
          // 绑定事件，当 AliPlayer 初始化完成后，将编辑器实例通过自定义的 ready 事件交出去
          _this.player.on("ready", () => {
            this.$emit("ready", _this.player);
          });
          _this.player.on("play", () => {
            this.$emit("play", _this.player);
          });
          _this.player.on("pause", () => {
            this.$emit("pause", _this.player);
          });
          _this.player.on("ended", () => {
            this.$emit("ended", _this.player);
          });
          _this.player.on("liveStreamStop", () => {
            this.$emit("liveStreamStop", _this.player);
          });
          _this.player.on("m3u8Retry", () => {
            this.$emit("m3u8Retry", _this.player);
          });
          _this.player.on("hideBar", () => {
            this.$emit("hideBar", _this.player);
          });
          _this.player.on("waiting", () => {
            this.$emit("waiting", _this.player);
          });
          _this.player.on("snapshoted", () => {
            this.$emit("snapshoted", _this.player);
          });

          _this.player.on("timeupdate", () => {
            _this.$emit("timeupdate", _this.player);
          });
          _this.player.on("requestFullScreen", () => {
            _this.$emit("requestFullScreen", _this.player);
          });
          _this.player.on("cancelFullScreen", () => {
            _this.$emit("cancelFullScreen", _this.player);
          });
          _this.player.on("error", () => {
            _this.$emit("error", _this.player);
          });
          _this.player.on("startSeek", () => {
            _this.$emit("startSeek", _this.player);
          });
          _this.player.on("completeSeek", () => {
            _this.$emit("completeSeek", _this.player);
          });

          if(callback){
            callback(_this.player);
          }
        });
      }
    },
    /**
     * 播放视频
     */
    play: function () {
      this.player.play();
    },
    /**
     * 暂停视频
     */
    pause: function () {
      this.player.pause();
    },
    /**
     * 重播视频
     */
    replay: function () {
      this.player.replay();
    },
    /**
     * 跳转到某个时刻进行播放
     * @argument time 的单位为秒
     */
    seek: function (time) {
      this.player.seek(time);
    },
    /**
     * 获取当前时间 单位秒
     */
    getCurrentTime: function () {
      return this.player.getCurrentTime();
    },
    /**
     *获取视频总时长，返回的单位为秒
     * @returns 返回的单位为秒
     */
    getDuration: function () {
      return this.player.getDuration();
    },
    /**
     获取当前的音量，返回值为0-1的实数ios和部分android会失效
     */
    getVolume: function () {
      return this.player.getVolume();
    },
    /**
     设置音量，vol为0-1的实数，ios和部分android会失效
     */
    setVolume: function (vol) {
      this.player.setVolume(vol);
    },
    /**
     *直接播放视频url，time为可选值（单位秒）目前只支持同种格式（mp4/flv/m3u8）之间切换暂不支持直播rtmp流切换
     *@argument url 视频地址
     *@argument time 跳转到多少秒
     */
    loadByUrl: function (url, time) {
      this.player.loadByUrl(url, time);
    },
    /**
     * 设置播放速度
     *@argument speed 速度
     */
    setSpeed: function (speed) {
      this.player.setSpeed(speed);
    },
    /**
     * 设置播放器大小w,h可分别为400px像素或60%百分比chrome浏览器下flash播放器分别不能小于397x297
     *@argument w 播放器宽度
     *@argument h 播放器高度
     */
    setPlayerSize: function (w, h) {
      this.player.setPlayerSize(w, h);
    },

    reloadPlayer: function (playInfo, callback) {
      this.isReload = true;
      this.initAliplayer(playInfo, callback);
      this.isReload = false;
    },

    ready(e) {
      console.log('ready',e)
    }
  }
}
</script>

<style lang="less" scoped>
@import 'https://g.alicdn.com/de/prismplayer/2.9.20/skins/default/aliplayer-min.css';
</style>