阿里web播放器微信浏览器打开进度条设置和时间获取

最新推荐文章于 2022-12-22 10:09:13 发布

qq_43101834

最新推荐文章于 2022-12-22 10:09:13 发布

阅读量1.2k

点赞数

分类专栏：实习学习 js

本文链接：https://blog.csdn.net/qq_43101834/article/details/111592306

版权

实习学习同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

8 篇文章 0 订阅

订阅专栏

解决的问题：
1.阿里云的web播放器：移动端（安卓是红米手机和苹果11）在微信浏览器打开适用，pc端谷歌浏览器打开适用，其他没测。
2.全代码直接用，进度条没办法完全禁止拖动，只能快进就让他回到上一时刻，代码注释好了。
3.视频占满屏幕宽度解决办法用的reset.css文件
4.获取当前时刻就curTime最好用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
<title>Aliplayer Online Settings</title>
<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.1/skins/default/aliplayer-min.css" />
<link rel="stylesheet" type="text/css" href="./css/reset.css"/>
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.1/aliplayer-min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
	
</style>

</head>
<body>

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

<p>点击时间：</p>
<div id="time1">0</div>
<p>拖动时间：</p>
<div id="time2">0</div>

<script>
	var player = new Aliplayer({
                    "id": "player-con",  //播放器外层容器的dom元素id
                    "source":"test.mp4", //视频播放地址url
                    "width": "100%",     //播放器的宽度 
                    "height": "300px",   //播放器的高度
                    "autoplay": false,   //是否自动播放
                    "isLive": false,     //是否直播
                    "cover": 'https://img.alicdn.com/tps/TB1EXIhOFXXXXcIaXXXXXXXXXXX-760-340.jpg',   //播放器默认封面图片,需要autoplay为’false’时，才生效
                    "rePlay": false,     //是否自动循环
                    "playsinline": true, //h5是否内置播放
                    "preload": true,     //是否自动加载
                    "language": "zh-cn", //语言
                    "controlBarVisibility": "hover", //控制面板的实现,hover点一下就会一直停留；click停留几秒，再点再停；
                    "useH5Prism": true,  //指定使用H5播放器
                    "skinLayout": [
                        {
                            "name": "bigPlayButton",
                            "align": "cc",
                            "x": 30,
                            "y": 80
                        },
                        {
                            "name": "errorDisplay",
                            "align": "tlabs",
                            "x": 0,
                            "y": 0
                        },
                        {
                            "name": "infoDisplay"
                        },
                        {
                            "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": 10
                                },
                                {
                                    "name": "volume",                                       //音量
                                    "align": "tr",
                                    "x": 5,
                                    "y": 10
                                }
                            ]
                        }
                    ],
                }, function (player) {
                    console.log("The player is created");

					setTime();	
				}
                
            );
  
 function setTime()
 {
	
	//curTime为当前进度条所在时间
	//recorTime为前一刻记录时间
	//setInterval为定时器，指定周期调用函数，下面指定为1秒
	var recordTime;
	setInterval(function(){
		 var curTime = parseInt(this.player.getCurrentTime());//逻辑：每一秒调用播放器获取时方法（getCurrentTime）整数输出给curTime，如果当前时刻减去前一刻大于1s，也就是快进了
  
        //以下为不能快进
			// if(curTime-recordTime>1)
			// {
			// 	curTime=recordTime;
			// 	player.seek(curTime);//让当前时刻等于前一时刻，播放器seek到这一时刻播放
		 //    }          
		 //    recordTime = curTime;//给前一时刻重新赋值	
			
			
		//以下为页面和控制台测试
		//time1和time2电脑端意义正确，time1点击时间在手机端无效
		    var curTime1 = parseInt(this.player.getCurrentTime());	
		    console.log(curTime1);
		    $("#time2").html(curTime1);
		 
		 player.on('completeSeek',function(e){
		    console.log('seek完成：'+ e.paramData);
		 	var clicktime = e.paramData;
		 	console.log(clicktime);
		 	$("#time1").html(parseInt(clicktime));
		 });
			 
	 },1000)				
 }			
</script>
</body>

qq_43101834

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
阿里web播放器微信浏览器打开进度条设置和时间获取

解决的问题：1.阿里云的web播放器：移动端（安卓是红米手机和苹果11）在微信浏览器打开适用，pc端谷歌浏览器打开适用，其他没测。2.全代码直接用，进度条没办法完全禁止拖动，只能快进就让他回到上一时刻，代码注释好了。3.视频占满屏幕宽度解决办法用的reset.css文件4.获取当前时刻就curTime最好用<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv=
复制链接

扫一扫

专栏目录