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

解决的问题：
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>

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

阿里播放器踩坑记录进度条重构 video loadByUrl失效解决方案
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人.谢谢大家!❤ 如果解决不了,可以在文末进群交流. 文档地址:https://player.alicdn.com/aliplayer/index. ...
简单音乐播放器，可拖动进度条。完整代码demo
效果图: 可播放暂停继续播放,进度条可拖动,时间展示,声音调节完整代码(直接拿来用) <!DOCTYPE html> <html> <head> <meta ...
阿里云播放器SDK的正确打开方式 | Aliplayer Web播放器介绍及功能实现(三)
阿里云播放器SDK(ApsaraVideo for Player SDK)是阿里视频云端到云到端服务的重要一环,除了支持点播和直播的基础播放功能外,还深度融合视频云业务,支持视频的加密播放.安全下载. ...
阿里云Aliplayer视频播放（web播放器）
1.官方文档https://help.aliyun.com/document_detail/125548.html?spm=a2c4g.11186623.6.1089.3f4b317c0dCNvV 2 ...
阿里云点播 web 播放器
浅谈最近遇到很多人使用阿里云点播 web 播放器,通过 STS 令牌的方式去播放 MTS 转码完成后的资源出现问题,"路见不平一声吼,写个过程先献丑",只是做了最基础的功能,看官 ...
基于WASM的H265 Web播放器
基于WASM的H265 Web播放器 1 背景 2 代码 3 依赖 3.1 WASM 3.2 FFmpeg 3.3 WebGL 3.4 Web Audio 4 播放器实现 4.1 模块结构 4.2 线 ...
Web播放器 TcPlayer——腾讯直播sdk的网页播放器
https://www.qcloud.com/document/product/267/7479 功能介绍腾讯云Web播放器主要解决在手机浏览器和PC浏览器上播放音视频流的问题,使您的视频内容可以不 ...
基于web assembly (WASM) 的H265 Web播放器
1 背景目前这个时间点,原生支持H265(HEVC)播放的浏览器极少,可以说基本没有,主要原因一个是H265的解码有更高的性能要求,从而换取更高的压缩率,目前大多数机器CPU软解H265的超清视频还 ...
使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流
一.使用阿里云播放器播放 .flv 和 hls(.m3u8) 格式的视频流官方教程:https://help.aliyun.com/document_detail/125570.htm?spm= ...

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

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

最新文章

热门文章