关于阿里播放器的配置问题

1. 导入阿里播放器文件

<!-- 引入 阿里播放器 -->
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.8.8/skins/default/aliplayer-min.css" />
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.8.8/aliplayer-min.js"></script>
<!-- 离线下载阿里播放器组件, 具体详见官网 -->
<script type="text/javascript" src="/static/aliyun/aliplayercomponents-1.0.5.min.js"></script>

为了避免不必要的错误, 建议将上述三个文件都引进来

2. 根据vid获取播放权限

根据获取到 vid 向后台发送请求获取相应的信息

$.ajax({
    url: "/front/aliyun/webPlayer/"+"7004944599c0457e8be7d5e9ea831a5c",
    method: "POST",
    type : "POST",
    success: function (res) {
        console.log(res);
        let videoId = res.videoPlayInfo.vid,
            playAuth = res.videoPlayInfo.playAuth,
            coverImg = res.videoMeta.coverURL;
    }
});

3. 根据获取到的信息实例化阿里播放器

var player = new Aliplayer({
    id: "J_prismPlayer", // 容器id
    autoplay: false,  // 是否自动播放
    isLive: false,           //是否是直播
    // playsinline:true,
    // controlBarVisibility:'always',
    // useH5Prism:true,        //采用h5模式播放
    // source: "/static/video/video1.mp4",// 视频地址
    vid: videoId,
    playauth: playAuth,
    cover: coverImg,
    // encryptType:1, //当播放私有加密流时需要设置。
    width: "1000px",          // 播放器宽度
    height: "568px",        // 播放器高度
    // x5_type:'h5',           // 启用同层播放
    x5_video_position:'top' // 播放窗口在上
}, function (player1) {
    console.log(player1);
    console.log("The AliPlay is created");
    /*var clickDom = document.getElementById("J_clickToPlay");
      clickDom.addEventListener("click", function(e) {
        // 调用播放器的play方法
        player.play();
      });
      // 监听播放器的pause事件
      player.on("pause", function() {
             //alert("播放器暂停啦！");
      });
      setTimeout(function () {
           player.play();
      }, 4000)*/
});
console.log(player);