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，这个是需要请求接口，后端返给你。播放视频必须要这两个东西。
最后就可以播放了。