UC官网设为首页收藏本站
[提问求助]

我在用UC滚动播放多个视频的时候遇到不少的问题,不知道哪位大神能够救救我!

[复制链接]
landere9614106 UC小班 发表于 2018年1月6日 17:20 最后回复 2018年1月6日 17:21
1053 3
本帖最后由 landere9614106 于 2018年1月6日 17:21 编辑

代码是html+js的简易播放器。问题有(1)不会自动播放(2)有些视频再次轮播时不是从头开始的,而是播放视频的最后某一段!
其所有代码如下:
<html>
<head>
<title>html5_video_play_test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
var strPlayurl="";
var strplaypath="";
var strMovieId = "";

var args = location.search.substr(1).split(/&/);
for (var i=0; i<args.length; ++i) {
    var tmp = args.split(/=/);           
        if (tmp[0] != "" && tmp[0] == "PlayUrl") {
                strPlayurl=tmp[1].substr(0);
                //alert("playurl="+decodeURI(strPlayurl));
        }
        if (tmp[0] != "" && tmp[0] == "playpath") {
                strplaypath=tmp[1].substr(0);
                //alert("playurl="+strPlayurl);
        }
        if (tmp[0] != "" && tmp[0] == "movieid") {                   
                var strMovieId = tmp[1].substr(0);
        }
}
if(strMovieId == ""){
        window.history.back();
}

function keyControl(){
            switch(event.keyCode){
        case 27: //escape
                        window.history.back();
                        break;
        case 48:  //vol --
                        break;
        case 49:  //vol ++
                        break;
        default:
                        break;
    }

}
</script>
<style>
#sel_for_play_list span{
        float:left;
        margin-left:10px;
        margin-top:10px;
        border:1px solid #36F;
        display:block;
}
#sel_for_play_list span:hover{
        display:inline-block;
        background-color:#d93258;
        background:-moz-linear-gradient(left,#DF2264,#E10B0B);
        background:-webkit-gradient(linear,0 50%,100% 50%,from(#DF2264),to(#E10B0B));
        background:-webkit-linear-gradient(left,#DF2264,#E10B0B);
        background:-o-linear-gradient(left,#DF2264,#E10B0B);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#DF2264, endColorstr=#E10B0B)";
        color:#fff!important;
}

</style>

</head>
<body>
    <div id="my_html5_player">
        <video id="vi" controls style="width:100%;height:100%;">
        </video>
    </div>
    <br><br>
    <div id="sel_for_play_list"></div>
    <script type="text/javascript">
        var vList;//['video/1.mp4', 'video/2.mp4','video/3.mp4']; // 初始化播放列表
        var vLen = -1; // 播放列表的长度
        var curr = 0; // 当前播放的视频
        var video = document.getElementById('vi');
               
        //发送请求到后台去取影片数据
        var kurl="/movies/getMovieInfo.php?movieid=" + strMovieId+"&dataType=json";
        //alert("function init()"+kurl);
        $.ajax({
                url:kurl,
                type:'POST',
                dataType:'json',
                success: function(innerHtmldata){
                        //alert(innerHtmldata["0"].playurl);
                        var tmparr = innerHtmldata["0"].playurl.split(/&/);
                        strPlayurl=tmparr[0];
                        for (var i=0; i<tmparr.length; ++i) {
                                var tmp = tmparr.split(/=/);
                                if (tmp[0] != "" && tmp[0] == "playpath") {
                                        strplaypath=tmp[1].substr(0);
                                }
                        }
                       
                        vList = strPlayurl.split(",");//['video/1.mp4', 'video/2.mp4','video/3.mp4']; // 初始化播放列表
                        vLen = vList.length; // 播放列表的长度
                        play_movie(curr);
                        buildplaylst();
                },
                error:function(aa,bb){//请求失败,重新发送
                        alert("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"+aa+bb);
                }
        });
               
        function buildplaylst() {//生成播放列表
                //sel_for_play_list
                for(var i=0;i<vLen;i++){
                        //右侧入
                        var span = document.createElement('span'); //1、创建元素
                        span.innerHTML="第"+(i+1)+"集";
                        //设置 li 属性,如 id
                        span.setAttribute("onclick", "play_movie("+i+")");
                        var container = document.getElementById('sel_for_play_list'); //2、找到父级元素
                        container.appendChild(span); //3、在末尾中添加元素
                }
        }
       
        function play_movie(id){
                curr = id;
               
                // 播放完了,重新播放
                if ((curr >= vLen) || (curr < 0)) curr = 0;
               
                $("#my_html5_player").empty();
                $("#my_html5_player").append("<video id=\"vi\" src=\"" + strplaypath + vList[curr] + "\"   controls=\"controls\" autoplay=\"autoplay\" onEnded=\"play_next_movie();\" style=\"width:100%;height:100%;\"></video>");
               
                document.title = vList[curr];
                return;
        }
       
        function play_next_movie(){
                curr ++;
               
                // 播放完了,重新播放
                if ((curr >= vLen) || (curr < 0)) curr = 0;
               
                play_movie(curr);
        }
    </script>
</body>
</html>

上UC,有快感!
该帖共收到 3 条回复!
UC小班 | 发表于 2018年1月6日 17:21 | 显示全部楼层
<html>
<head>
<title>html5_video_play_test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
var strPlayurl="";
var strplaypath="";
var strMovieId = "";

var args = location.search.substr(1).split(/&/);
for (var i=0; i<args.length; ++i) {
    var tmp = args[i].split(/=/);           
        if (tmp[0] != "" && tmp[0] == "PlayUrl") {
                strPlayurl=tmp[1].substr(0);
                //alert("playurl="+decodeURI(strPlayurl));
        }
        if (tmp[0] != "" && tmp[0] == "playpath") {
                strplaypath=tmp[1].substr(0);
                //alert("playurl="+strPlayurl);
        }
        if (tmp[0] != "" && tmp[0] == "movieid") {                   
                var strMovieId = tmp[1].substr(0);
        }
}
if(strMovieId == ""){
        window.history.back();
}

function keyControl(){
            switch(event.keyCode){
        case 27: //escape
                        window.history.back();
                        break;
        case 48:  //vol --
                        break;
        case 49:  //vol ++
                        break;
        default:
                        break;
    }

}
</script>
<style>
#sel_for_play_list span{
        float:left;
        margin-left:10px;
        margin-top:10px;
        border:1px solid #36F;
        display:block;
}
#sel_for_play_list span:hover{
        display:inline-block;
        background-color:#d93258;
        background:-moz-linear-gradient(left,#DF2264,#E10B0B);
        background:-webkit-gradient(linear,0 50%,100% 50%,from(#DF2264),to(#E10B0B));
        background:-webkit-linear-gradient(left,#DF2264,#E10B0B);
        background:-o-linear-gradient(left,#DF2264,#E10B0B);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#DF2264, endColorstr=#E10B0B)";
        color:#fff!important;
}

</style>

</head>
<body onkeydown="keyControl()">
    <div id="my_html5_player">
        <video id="vi" controls onEnded="play_next_movie();" style="width:100%;height:100%;">
        </video>
    </div>
    <br><br>
    <div id="sel_for_play_list"></div>
    <script type="text/javascript">
        var vList;//['video/1.mp4', 'video/2.mp4','video/3.mp4']; // 初始化播放列表
        var vLen = -1; // 播放列表的长度
        var curr = 0; // 当前播放的视频
        var video = document.getElementById('vi');
               
        //发送请求到后台去取影片数据
        var kurl="/movies/getMovieInfo.php?movieid=" + strMovieId+"&dataType=json";
        //alert("function init()"+kurl);
        $.ajax({
                url:kurl,
                type:'POST',
                dataType:'json',
                success: function(innerHtmldata){
                        //alert(innerHtmldata["0"].playurl);
                        var tmparr = innerHtmldata["0"].playurl.split(/&/);
                        strPlayurl=tmparr[0];
                        for (var i=0; i<tmparr.length; ++i) {
                                var tmp = tmparr[i].split(/=/);
                                if (tmp[0] != "" && tmp[0] == "playpath") {
                                        strplaypath=tmp[1].substr(0);
                                }
                        }
                       
                        vList = strPlayurl.split(",");//['video/1.mp4', 'video/2.mp4','video/3.mp4']; // 初始化播放列表
                        vLen = vList.length; // 播放列表的长度
                        play_movie(curr);
                        buildplaylst();
                },
                error:function(aa,bb){//请求失败,重新发送
                        alert("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"+aa+bb);
                }
        });
               
        function buildplaylst() {//生成播放列表
                //sel_for_play_list
                for(var i=0;i<vLen;i++){
                        //右侧入
                        var span = document.createElement('span'); //1、创建元素
                        span.innerHTML="第"+(i+1)+"集";
                        //设置 li 属性,如 id
                        span.setAttribute("onclick", "play_movie("+i+")");
                        var container = document.getElementById('sel_for_play_list'); //2、找到父级元素
                        container.appendChild(span); //3、在末尾中添加元素
                }
        }
       
        function play_movie(id){
                curr = id;
               
                // 播放完了,重新播放
                if ((curr >= vLen) || (curr < 0)) curr = 0;
               
                $("#my_html5_player").empty();
                $("#my_html5_player").append("<video id=\"vi\" src=\"" + strplaypath + vList[curr] + "\"   controls=\"controls\" autoplay=\"autoplay\" onEnded=\"play_next_movie();\" style=\"width:100%;height:100%;\"></video>");
               
                document.title = vList[curr];
                return;
        }
       
        function play_next_movie(){
                curr ++;
               
                // 播放完了,重新播放
                if ((curr >= vLen) || (curr < 0)) curr = 0;
               
                play_movie(curr);
        }
    </script>
</body>
</html>
上UC,有快感!
回复 |

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则 允许回帖同步到新浪微博