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'></video>
选中 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.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 视频(自定义视频播放器源码)
来源: http://www.bubuko.com/infodetail-3367880.html