prismplayer 列表播放及使用说明api

prismplayer 使用说明api

使用它的原因

需要改成列表播放并且播放完成后自动跳转下一个视频
老项目中带的播放器阿里云好像找不到文档了感觉是给废弃了，不过我还是在一个视频里找到了一些资料

代码

js代码

var player;
var currentPlayIndex=0;

$(document).ready(function(){
    $(".videoPlayList li a[liIndex='" + currentPlayIndex + "']").attr("class","currentPlay")
    var videoUrl = $(".videoPlayList li a[liIndex='" + currentPlayIndex + "']").attr("VideoUrl");

    // 初始化播放器
   player = new prismplayer({
        id: "J_prismPlayer",   // 容器id
        source:vdeoUrl,   // 视频地址
       autoplay: true,    // 自动播放：否
        width: "100%",      // 播放器宽度
        height: "5.33rem",   // 播放器高度
        skinLayout: [
            {
                "align":"blabs",
                "x":0,
                "y":0,
                "name":"controlBar",
                "children":[
                    {
                        "align":"tlabs",
                        "x":0,
                        "y":0,
                        "name":"progress"
                    },{
                        "align":"tl",
                        "x":15,
                        "y":26,
                        "name":"playButton"
                    },{
                        "align":"tl",
                        "x":10,
                        "y":24,
                        "name":"timeDisplay"
                    },{
                        "align":"tr",
                        "x":20,
                        "y":25,
                        "name":"fullScreenButton"
                    },{
                        "align":"tr",
                        "x":20,
                        "y":25,
                        "name":"volume"
                    }
                ]
            }
        ]
    });

   //播放结束调用
    player.on("ended", function () {
        var toPlayIndex = currentPlayIndex + 1;
        var labelLi = $(".videoPlayList li a[liIndex='" + toPlayIndex + "']");
        if (labelLi) {
            $(labelLi).click();
            $(".videoPlayList li a[liIndex='" + currentPlayIndex + "']").attr("class","notPlay");
            $(labelLi).attr("class","currentPlay");
            currentPlayIndex = toPlayIndex;
        }
    });

})

//修改播放视频
function change(videoUrl,index) {
    player.loadByUrl(videoUrl);
    $(".videoPlayList li a").attr("class","notPlay");
    $(".videoPlayList li a[liIndex='" + index + "']").attr("class","currentPlay");
    currentPlayIndex = index;
}

jsp页面

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
//引入prismplayer js包
<script type="text/javascript" src="//g.alicdn.com/de/prismplayer/1.5.7/prism-min.js"></script>

<style>

    .currentPlay {
        color: red;
    }
    .notPlay {
        color: #6d6a6a;
    }
</style>
<%-- 视频容器--%>
<div class="sub_type bra2">
    <div class="prism-player" id="J_prismPlayer"></div>
</div>
<%--视频列表容器--%>
<div class="videoPlayList">
    <ul>
        <c:forEach items="${videoPlayList}" var="item" varStatus="id">
            <li> <a href="javascript:void(0)" liIndex="${id.index}" transVideoUrl="${item.transferVideoUrl}" onclick="change('${item.transferVideoUrl}',${id.index});" class="notPlay"> ${item.fileName}</a> </li>
        </c:forEach>
    </ul>
</div>

总结

主要通过 player.loadByUrl(transVideoUrl);重新加载新的视频
结束调用 player.on(“ended”, function () {
});

api

资料来之不易希望能帮助到您。