如何替换html5视频播放器(HTML5自定义视频播放器源码)
类别:Web前端 浏览量:1810
时间:2021-10-09 00:01:51 如何替换html5视频播放器
HTML5自定义视频播放器源码video对象
兼容性写法
<video controls> <source src="data/demo.ovg"> <source src="data/demo.mp4"> <source src="data/demo.webm"> 您的浏览器不支持,请升级您的浏览器 </video>
video 标签 width height autoplay muted
poster带有预览图(海报图片)的视频播放器
<video src='data/demo.mp4' muted controls autoplay height='400' width="200" poster='data/poster.jpg" alt="如何替换html5视频播放器(HTML5自定义视频播放器源码)" border="0" />
选中video标签
var VideoNode = document.getElementById('myVideo');
src控制视频的来源
VideoNode.src = 'data/demo.ogv';
手动设置控件 controls
VideoNode.controls = true;
设置视频音量
VideoNode.volume = 0.5;
currentTime当前播放时间
快进效果
gogogo.onclick = function(){ VideoNode.currentTime = VideoNode.currentTime + 3; };
暂停 pause()
stopNode.onclick = function(){ VideoNode.pause(); };
播放play()
playNode.onclick = function(){ VideoNode.play(); };
load 刷新播放器的事件
reloadNode.onclick = function(){ VideoNode.src = 'data/demo.mp4'; VideoNode.load(); };
canplay 视频已经加载好 可以开始播放了
VideoNode.addEventListener('canplay',function(){ console.log('视频已经加载好 可以开始播放了'); });
requestFullscreen 让video标签变成全屏
VideoNode.webkitRequestFullscreen(); VideoNode.mozRequestFullScreen(); fullScreenNode.onclick = function(){ if(VideoNode.webkitRequestFullscreen){ VideoNode.webkitRequestFullscreen(); } else if(VideoNode.mozRequestFullScreen){ VideoNode.mozRequestFullScreen(); } };
volumechange 当音量更改时
VideoNode.onvolumechange = function(){ console.log('volumechange'); };
声音随机更改
volumeNode.onclick = function(){ VideoNode.volume = Math.random(); };
seeking 当用户开始拖动进度条时 就会触发的事件
var seekingNum = 0; VideoNode.onseeking = function(){ console.log('seeking...'); seekingNum++; seeking.innerHTML = seekingNum; };
seeked 当用户对视频的进度条并且已经完成操作时会触发的事件
var seekedNum = 0; VideoNode.onseeked = function(){ console.log('seeked...'); seekedNum++; seeked.innerHTML = seekedNum; };
timeupdate监听视频播放的状态
VideoNode.addEventListener('timeupdate',function(){ // 总时长,以分钟:秒的形式显示 let allTime = parseInt(VideoNode.duration/60)+':'+parseInt(VideoNode.duration%60); // 当前时间,以分钟:秒的形式显示 let nowTime = parseInt(VideoNode.currentTime/60)+':'+parseInt(VideoNode.currentTime%60); timeNode.innerHTML = nowTime+'/'+allTime; })
readyState 视频的准备信息
console.log(VideoNode.readyState); setTimeout(function(){ console.log(VideoNode.readyState); },500);
playbackRate 查看或设置视频的一个播放速度
console.log(VideoNode.playbackRate)
Rate设置倍速
//Rate设置0.5倍速 RateNode.children[0].onclick = function(){ VideoNode.playbackRate = 0.5; }; //Rate设置1倍速 RateNode.children[1].onclick = function(){ VideoNode.playbackRate = 1; }; //Rate设置2倍速 RateNode.children[2].onclick = function(){ VideoNode.playbackRate = 2; };
loop的设置
loopNode.onclick = function(){ if(VideoNode.loop == false){ this.innerHTML = '循环'; VideoNode.loop = true; } else{ this.innerHTML = '不循环'; VideoNode.loop = false; } };
src返回的数据
console.log('src='+VideoNode.src);
currentSrc返回的数据
console.log('currentSrc='+VideoNode.currentSrc);
监听ended事件
VideoNode.addEventListener('ended',function(){ console.log('视频播放结束了'); VideoNode.play(); })
查看视频的网络状态
console.log(VideoNode.networkState)
手动设置控件 controls
VideoNode.controls = true;
手动设置静音 muted
VideoNode.muted = true;
自定义视频播放器
放图
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} .outerNode{width: 540px;height: 332px;position: absolute;left: 50%;top: 50%;margin: -166px 0 0 -270px;box-shadow: 0 0 4px #5b606d;} .outerNode .videoNode{ width: 540px;height: 305px;float: left; background: black; } .outerNode .controlsNode{ width: 540px;height: 27px;float: left;background: url(images/ctrs_bg.jpg" alt="如何替换html5视频播放器(HTML5自定义视频播放器源码)" border="0" />
总结
以上所述是小编给大家介绍的HTML5自定义视频播放器源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- python scrapy爬虫教程视频(详解python3 + Scrapy爬虫学习之创建项目)
- python人脸识别实战视频(Python学习笔记之图片人脸检测识别实例教程)
- html5 web技术(html5视频常用API接口的实战示例)
- 在网页中嵌入视频
- html5video怎么优化(HTML5 video循环播放多个视频的方法步骤)
- netcoredocker视频教程(Docker安装部署Net Core实现过程解析)
- css3过渡技巧视频(css3过渡_动力节点Java学院整理)
- html为什么视频不能自动播放(html5中嵌入视频自动播放的问题解决)
- html5基本标签详解(HTML5 通过Vedio标签实现视频循环播放的示例代码)
- html5视频播放(使用HTML5加载音频和视频的实现代码)
- 用python做一个表白视频(python仿抖音表白神器)
- html5炫酷代码(HTML5实现视频弹幕功能)
- JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
- html5视频播放代码详解(HTML5基于flash实现播放RTMP协议视频的示例代码)
- python抖音视频收集(python制作抖音代码舞)
- html5video怎么优化(html5 移动端视频video的android兼容去除播放控件、全屏)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
- 寒假余额不满24小时,不如来一场说走就走的亲子阅读之旅(寒假余额不满24小时)
- 省委书记出席的交流会,十位县委书记同场发言,代表公文材料的高水平(省委书记出席的交流会)
- 《刘老根3》热播,去世15年的她却再次被 伤害(去世15年的她却再次被)
- 十二星座爱情支配欲指数(十二星座爱情支配欲指数)
热门推荐
- sqlserver限制windows身份登录(解决sql server 数据库,sa用户被锁定的问题)
- python快速数据分类(Python基于滑动平均思想实现缺失数据填充的方法)
- 云服务器传统服务器配置(云服务器、高防服务器的不同之处体现在哪里?)
- dede友情链接改为logo轮播教程(dedecms广告生成JS文件和JS调用-DEDE广告优化)
- 数据库创建索引的注意事项
- sql server证书配置(SQL Server Alwayson创建代理作业的注意事项详解)
- 香港云服务器哪个最好(香港云服务器和国内云服务器有什么区别?)
- canvas绘制图像文件方法(Canvas多边形绘制的实现方法)
- 简述python2与python3的不同点(Python2与Python3的区别实例分析)
- sqlserver语句显示表字段(SQL Server查找表名或列名中包含空格的表和列实例代码)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9