HTML5自定义视频播放器源码
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
video对象
兼容性写法
1 2 3 4 5 6 | < video controls> < source src = "data/demo.ovg" > < source src = "data/demo.mp4" > < source src = "data/demo.webm" > 您的浏览器不支持,请升级您的浏览器 </ video > |
video 标签 width height autoplay muted
poster带有预览图(海报图片)的视频播放器
1 | < video src = 'data/demo.mp4' muted controls autoplay height = '400' width = "200" poster = 'data/poster.jpg' ></ video > |
选中video标签
src控制视频的来源
手动设置控件 controls
设置视频音量
currentTime当前播放时间
快进效果
暂停 pause()
播放play()
load 刷新播放器的事件
1 2 3 4 | reloadNode.onclick = function(){ VideoNode.src = 'data/demo.mp4'; VideoNode.load(); }; |
canplay 视频已经加载好 可以开始播放了
requestFullscreen 让video标签变成全屏
1 2 3 4 5 6 7 8 9 10 11 | VideoNode.webkitRequestFullscreen(); VideoNode.mozRequestFullScreen(); fullScreenNode.onclick = function(){ if(VideoNode.webkitRequestFullscreen){ VideoNode.webkitRequestFullscreen(); } else if(VideoNode.mozRequestFullScreen){ VideoNode.mozRequestFullScreen(); } }; |
volumechange 当音量更改时
声音随机更改
seeking 当用户开始拖动进度条时 就会触发的事件
1 2 3 4 5 6 | var seekingNum = 0; VideoNode.onseeking = function(){ console.log('seeking...'); seekingNum++; seeking.innerHTML = seekingNum; }; |
seeked 当用户对视频的进度条并且已经完成操作时会触发的事件
1 2 3 4 5 6 | var seekedNum = 0; VideoNode.onseeked = function(){ console.log('seeked...'); seekedNum++; seeked.innerHTML = seekedNum; }; |
timeupdate监听视频播放的状态
1 2 3 4 5 6 7 | 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 视频的准备信息
1 2 3 4 | console.log(VideoNode.readyState); setTimeout(function(){ console.log(VideoNode.readyState); },500); |
playbackRate 查看或设置视频的一个播放速度
Rate设置倍速
1 2 3 4 5 6 7 8 9 10 11 12 | //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的设置
1 2 3 4 5 6 7 8 9 10 | 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事件
1 2 3 4 | VideoNode.addEventListener('ended',function(){ console.log('视频播放结束了'); VideoNode.play(); }) |
查看视频的网络状态
console.log(VideoNode.networkState)
手动设置控件 controls
VideoNode.controls = true;
手动设置静音 muted
VideoNode.muted = true;
自定义视频播放器
放图
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 | <!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.gif) repeat-x; } .outerNode .controlsNode .playNode{ float: left;width: 15px;height: 17px;margin: 6px 0 0 14px; background: url(images/playNode.png) no-repeat;cursor: pointer; } .outerNode .controlsNode .pauseNode{ float: left;width: 15px;height: 17px;margin: 6px 0 0 14px; background: url(images/pause.png) no-repeat;cursor: pointer; } .outerNode .controlsNode .loadNode{width: 267px;height: 10px;margin: 9px 0 0 14px;float: left;background: url(images/load_bg.png) repeat-x;position: relative;} .outerNode .controlsNode .loadNode .lineNode{ width: 0%;height: 7px;position: absolute;left: 0;top: 1px; background: url(images/line_bg.png) repeat-x; } .outerNode .controlsNode .loadNode .lineNode .lineRight{ width: 2px;height: 100%;position: absolute;right: 0;top: 0; background: url(images/line_r_bg.png) no-repeat; } .outerNode .controlsNode .loadNode .loadLeft{ height: 100%;width:3px ;position: absolute;left: 0;top: 0; background: url(images/left_bg.png) no-repeat;z-index: 4; } .outerNode .controlsNode .loadNode .loadRight{ height: 100%;width:3px ;position: absolute;right: 0;top: 0; background: url(images/right_bg.png) no-repeat; } .outerNode .controlsNode .loadNode .crlNode{width: 17px;height: 17px;background: url(images/crl_bg.png);position: absolute;left: -8.5px;top: -3.5px;cursor: pointer;z-index: 5;} .outerNode .controlsNode .timeNode{ float: left;width: 75px;height: 10px;margin: 9px 0 0 9px; } .outerNode .controlsNode .timeNode span{font-size:10px;float: left;line-height: 10px;color: white; } .outerNode .controlsNode .volumeNode{ width: 17px;height: 16px;float: left;margin: 5px 0 0 6px; background: url(images/volume_bg.png); } .outerNode .controlsNode .volumeLine{ height: 8px;width: 61px;float: left;margin: 10px 0 0 4px; background: url(images/volumeLine_bg.png) repeat-x;position: relative; } .outerNode .controlsNode .volumeLine .v_left{ width: 3px;height:100%;position: absolute;left: 0;top: 0;background: url(images/v_left.png) no-repeat; } .outerNode .controlsNode .volumeLine .v_right{ width: 3px;height:100%;position: absolute;right: 0;top: 0;background: url(images/v_right.png) no-repeat; } .outerNode .controlsNode .volumeLine .v_DragNode{width: 15px;height: 13px;position: absolute;left: 58.5px;top: -3.5px;background: url(images/vo_d.png) no-repeat;cursor: pointer;} .outerNode .controlsNode .fullNode{ width:15px;height:17px;float: left;margin: 6px 0 0 35px; background: url(images/full_bg.png) no-repeat;cursor: pointer; transition: 0.7s; } .outerNode .controlsNode .fullNode:hover{ background: url(images/full_hover_bg.png) no-repeat; } </ style > </ head > < body > <!-- 最外层的元素 --> < div class = 'outerNode' > <!-- video元素 --> < video class = 'videoNode' src = 'data/imooc.mp4' poster = "data/poster.jpg" ></ video > <!-- 控制器的元素 --> < div class = 'controlsNode' > <!-- 控制播放暂停的按钮 --> < div class = 'playNode' ></ div > <!-- video的进度条 --> < div class = 'loadNode' > < div class = 'loadLeft' ></ div > < div class = 'loadRight' ></ div > <!-- 拖动进度条的按钮 --> < div class = 'crlNode' ></ div > <!-- 真正的进度条 --> < div class = 'lineNode' > < div class = 'lineRight' ></ div > </ div > </ div > <!-- 时间的元素 --> < div class = 'timeNode' > < span class = 'now' >00:00</ span > < span > - </ span > < span class = 'all' >4:30</ span > </ div > <!-- 声音的标志 --> < div class = 'volumeNode' ></ div > <!-- 声音的条 --> < div class = 'volumeLine' > < div class = 'v_left' ></ div > < div class = 'v_right' ></ div > < div class = 'v_DragNode' ></ div > </ div > <!-- 全屏的按钮 --> < div class = 'fullNode' ></ div > </ div > </ div > < script type = "text/javascript" > //播放暂停的控制 //PlayNode 播放器按钮 //VideoNode 播放器 //PlayBln 控制暂停播放的布尔值 //FullNode 全屏按钮 //nowNode 当前时间 //allNode 视频的全部时间 //LineNode 当前的进度条 //CrlNode 进度条按钮 //LoadNode 进度条外面的元素 var PlayNode = document.getElementsByClassName('playNode')[0], VideoNode = document.getElementsByClassName('videoNode')[0], FullNode = document.querySelector('.fullNode'), nowNode = document.querySelector('.now'), allNode = document.querySelector('.all'), LineNode = document.querySelector('.lineNode'), CrlNode = document.querySelector('.crlNode'), LoadNode = document.querySelector('.loadNode'), VDragNode = document.querySelector('.v_DragNode'), PlayBln = true; //播放、暂停的事件 PlayNode.onclick = function(){ //传统的通过布尔值去改变classname的方法 PlayBln = !PlayBln; if(PlayBln == false){ this.className = 'pauseNode'; VideoNode.play(); } else{ this.className = 'playNode'; VideoNode.pause(); } }; //全屏按钮的事件 FullNode.onclick = function(){ if(VideoNode.webkitRequestFullscreen){ VideoNode.webkitRequestFullscreen(); } else if(VideoNode.mozRequestFullScreen){ VideoNode.mozRequestFullScreen(); } else{ VideoNode.requestFullscreen(); } }; //解决最开始时间的NAN的问题 VideoNode.addEventListener('canplay',function(){ var needTime = parseInt(VideoNode.duration); var s = needTime%60; var m = parseInt(needTime / 60); var timeNum = toDou(m)+':'+toDou(s); allNode.innerHTML = timeNum; },false); //解决 时间不足10 的问题 function toDou(time){ return time< 10 ?'0'+time:time; } //当视频播放的时候 需要当前的时间动起来 VideoNode.addEventListener('timeupdate',function(){ //目前的 百分比进度 LineNode.style.width = VideoNode .currentTime/VideoNode.duration*100+'%'; CrlNode.style.left = LineNode .offsetWidth - 8.5 + 'px' var needTime = parseInt (VideoNode.currentTime); var s = needTime %60; var m = parseInt (needTime / 60); var timeNum = toDou (m)+':'+toDou(s); nowNode.innerHTML = timeNum ; },false); //声音的拖拽按钮 VDragNode.onmousedown = function (e){ var ev = e || event; var l = ev .clientX - this.offsetLeft; document.onmousemove = function (e){ var ev = e || event; var needX = ev .clientX - l; var maxX = VDragNode .parentNode.offsetWidth - 2.5; needX = needX < -2.5 ? - 2.5 : needX; needX = needX > maxX ? maxX : needX; //计算0 - 1 var lastVolume = (VDragNode.offsetLeft + 2) / VDragNode.parentNode.offsetWidth ; VideoNode.volume = lastVolume < 0 ? 0 : lastVolume; VDragNode.style.left = needX + 'px'; }; document.onmouseup = function (e){ document.onmousemove = document .onmouseup = null ; } return false; } //拖拽进度条按钮 CrlNode.onmousedown = function (e){ var ev = e || event; var l = ev .clientX - this.offsetLeft; VideoNode.pause(); document.onmousemove = function (e){ var ev = e || event; var needX = ev .clientX - l; var maxX = LoadNode .offsetWidth - 8.5; needX = needX < -8.5 ? -8.5 : needX; needX = needX > maxX ? maxX : needX; CrlNode.style.left = needX + 'px'; LineNode.style.width = (CrlNode.offsetLeft+9)/LoadNode.offsetWidth*100 + '%'; }; document.onmouseup = function(){ document.onmousemove = document.onmouseup = null; VideoNode.currentTime = VideoNode.duration * (CrlNode.offsetLeft+9)/LoadNode.offsetWidth; if(PlayBln == false){ //console.log(1); PlayNode.className = 'pauseNode'; VideoNode.play(); } else{ //console.log(2); PlayNode.className = 'playNode'; VideoNode.pause(); } }; return false; }; </ script > </ body > </ html > |
总结
以上所述是小编给大家介绍的HTML5自定义视频播放器源码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关文章
- HTML5中的video标签用于播放视频文件的,本文介绍了Html5 video 标签 src 用数据流方式播放视频,具有一定的参考价值,感兴趣的可以了解一下2023-09-27
- 由于期末大作业我想插入一个背景音乐,实现点开网页就会自动播放音频的效果,今天通过本文给大家分享下我基于HTML实现音乐或视频自动播放功能,代码简单易懂,需要的朋友参2022-05-27
- 这篇文章主要介绍了HTML5 video循环播放多个视频的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来2020-08-06
- 这篇文章主要介绍了html5中嵌入视频自动播放的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起2020-05-25
- 这篇文章主要介绍了html5自动播放mov格式视频的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2020-01-14
- 目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧2019-07-29
HTML5 视频播放(video),JavaScript控制视频的实例代码
这篇文章主要介绍了HTML5 视频播放(video),JavaScript控制视频的实例代码,需要的朋友参考下吧2018-10-08- 这篇文章主要介绍了HTML5视频播放插件 video.js介绍 ,需要的朋友可以参考下2018-09-29
- 这里主要研究的是通过应用html5来解决视频播放的问题。Adobe公司因为战略错误,忽视了移动互联这块,移动终端对flash支持并不好,特别是苹果终端都不支持flash(苹果电脑和2016-11-06
- 本文主要介绍了html网页播放多个视频的几种方法,包含iframe标签,VLC插件和一些常见的js插件,具有一定的参考价值,感兴趣的可以了解一下2024-03-04
最新评论