如何替换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自定义视频播放器源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣
- html5video怎么用(html5视频媒体标签video的使用方法及完整参数说明详解)
- html5视频播放代码详解(HTML5基于flash实现播放RTMP协议视频的示例代码)
- 如何用python爬取最新电影(使用python实现抓取腾讯视频所有电影的爬虫)
- css3过渡技巧视频(css3过渡_动力节点Java学院整理)
- html为什么视频不能自动播放(html5中嵌入视频自动播放的问题解决)
- opencv调用摄像头图像识别(Python+OpenCV采集本地摄像头的视频)
- netcoredocker视频教程(Docker安装部署Net Core实现过程解析)
- phpstudy8.0使用教程视频(phpstudy v8.1 Apache伪静态配置图文教程)
- html5video怎么优化(html5 移动端视频video的android兼容去除播放控件、全屏)
- html5视频播放(使用HTML5加载音频和视频的实现代码)
- 如何替换html5视频播放器(HTML5自定义视频播放器源码)
- html5添加背景(Html5实现首页动态视频背景的示例代码)
- canvas绘制二进制图片(Canvas获取视频第一帧缩略图的实现)
- html5 webrtc技术详解(Html5 webRTC简单实现视频调用的示例代码)
- html5炫酷代码(HTML5实现视频弹幕功能)
- html5支持video的视频格式(解决html5中的video标签ios系统中无法播放使用的问题)
- 这部民警编演的红色话剧,讲述了一个不断追寻的故事(这部民警编演的红色话剧)
- 日本菜有什么好吃(日本菜有什么好吃的做法)
- 韩国泡菜做法(韩国泡菜的做法步骤)
- 泰国旅游攻略(泰国旅游攻略必去景点)
- 越难春卷(越难春卷皮怎么用)
- 休闲VS新古典 办公家居简约设计(办公家居简约设计)
热门推荐
- margin auto 实现居中,与text-align:center的区别
- keydown、keypress、keyup的使用
- 护卫神主机管理系统(护卫神主机大师如何开启和关闭主机管理系统?)
- php各种绕过姿势(php面试实现反射注入的详细方法)
- dedecms自助购买(DEDECMS 支付宝操作手册)
- JavaScript生成GUID的方法
- python中匿名函数关键字(浅谈python之高阶函数和匿名函数)
- sqlserver怎么调成混合登录(如何快速删掉SQL Server登录时登录名下拉列表框中的选项)
- dedecms快速建站(Dedecms 生成静态页面速度优化方法)
- 微信小程序获取手机信息(微信小程序获取手机号的踩坑记录)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9