阿里云播放器使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36535245/article/details/82152384

1.第一点引用的js,css版本一定要是最新，不然会有很多很多很多的坑，现在版本是

 <link rel="stylesheet" href="//g.alicdn.com/de/prismplayer/2.7.1/skins/default/aliplayer-min.css" />
    <script type="text/javascript" src="//g.alicdn.com/de/prismplayer/2.7.1/aliplayer-min.js"></script>

2.给视频一个容器

<div class="prism-player" id="J_prismPlayer"></div>

3.初始化阿里云视频播放器

直播时使用的source播放，没有指定IsLive是因为我们要切换清晰度，newId和playauth为空

重播时使用的newId和playauth播放，source为空

      //重新创建
        player = new Aliplayer({
            id: "J_prismPlayer",
            vid: newVid,
            playauth: newPlayAuth,
            playsinline: true,
            width: "840px",
            height: "472.5px",
            controlBarVisibility: "hover",
            useH5Prism: false,
            useFlashPrism: false,
            rePlay: true,
            source: jsonData.DataList[0].VideoSavePath,
            cover: "../../img/live/error.png",
            autoplay: true,         //播放器是否自动播放
            format: "m3u8",
            //skinLayout: ''         
        }, function (player) {
            console.log("播放器创建了。");
        });
        player.on('ready', function (e) {
             //是直播时不要跳转到历史观看，不然不能自动播放直播
            if (CourseType != "live" && CourseType != "1") {
                player.seek(jsonData.TotalCount);
            }          
            getTime();
        });
        player.on('liveStreamStop', function () {
            alert('直播已结束');
        });
       //错误处理，这些class是阿里云错误的容器
        player.on('error', function (e) {
            $('.prism-ErrorMessage').css("background-image", "url(/img/live/error.png)");
            $('.prism-error-content').html("");
            $('.prism-error-operation').html('');
            $('.prism-detect-info').html("");
        });

    }
   //定时器获取当前观看写入观看记录
    var timer = null;
    function getTime() {
        var currentTime = player.getCurrentTime();
        EndPosition(currentTime);
        timer = setTimeout(getTime, 5000);
    }
    //清除定时器
    function clear() {
        if (timer) {
            clearTimeout(timer);
            timer = null;
        }
    }

要修改底部的可以修改阿里云的skinLayout属性，在Aliplayer初始化的后面加上

          skinLayout:[
        {name: "bigPlayButton", align: "blabs", x: 0, y: 80},
        {
            name: "H5Loading", align: "cc"
        },
        {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
        { name: "infoDisplay", align: "cc" },
        {name:"tooltip", align:"blabs",x: 0, y: 56},
        {name: "thumbnail"},
        {
        name: "controlBar", align: "blabs", x: 0, y: 0,
        children: [
          {name: "progress", align: "blabs", x: 0, y: 44},
          {name: "playButton", align: "tl", x: 15, y: 12},
          {name: "timeDisplay", align: "tl", x: 10, y: 7},
          {name: "fullScreenButton", align: "tr", x: 10, y: 12},
         // {name:"subtitle", align:"tr",x:15, y:12},
          {name:"setting", align:"tr",x:15, y:12},
          {name: "volume", align: "tr", x: 5, y: 10}
        ]
        }
        ]