aliplayer的使用

近期項目是做一個課程購買播放的功能。

其中使用了aliplayer完成了播放視頻功能，先給大家看一下效果圖：

 

 

 因為是vue項目，首先是在index.html中引入兩個文件

   <link
      rel="stylesheet"
      href="https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"
    />
    <script
      charset="utf-8"
      type="text/javascript"
      src="https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-min.js"
    ></script>　

　　然后在需要的頁面中使用：

<div
                        class="prism-player"
                        id="J_prismPlayer"
                        style="height: 100%;"
                    ></div>

　　即可：

剩下的是在js部分的代碼：

   if (this.player) {
                        this.player.dispose();
                        this.player = new Aliplayer({
                            // encryptType: 1, //當播放私有加密流時需要設置。
                            id: "J_prismPlayer",
                            vid: ress.data.dataCollection.data.videoId,
                            width: "100%",
                            autoplay: true,
                            playauth: ress.data.dataCollection.data.auth,
                            source: item.videoUrl
                        });
                    }

　　其中

this.player.dispose();是銷毀之前的視頻，不銷毀的話，它會一直存在。
主要是

Aliplayer中的配置：
vid是視頻的videoid，這個是你存視頻后，阿里返給你的。
然后就是playauth，這個是需要請求接口，后端返給你。播放視頻必須要這兩個東西。
最后就可以播放了。