视频html5播放器代码实例

<!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 - 1var 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播放器代码实例相关推荐

基于python的音频播放器_基于python实现音乐播放器代码实例
基于python实现音乐播放器代码实例,一首,函数,按钮,布局,音乐基于python实现音乐播放器代码实例易采站长站,站长之家为您整理了基于python实现音乐播放器代码实例的相关内容. 核心播放 ...
html5视频播放器代码实例(含倍速、清晰度切换、续播)
本文将对视频播放相关的功能进行说明(基于云平台),包括初始化播放器.播放器尺寸设置.视频切换.倍速切换.视频预览.自定义视频播放的开始/结束时间.禁止拖拽进度.播放器皮肤.控件按钮以及播放控制等. ...
python音乐编程_基于python实现音乐播放器代码实例
核心播放模块(pygame内核) import time import pygame import easygui as gui file = r'D:\CloudMusic\G.E.M.邓紫棋,艾热 ...
python 循环播放音乐_基于python实现音乐播放器代码实例
核心播放模块(pygame内核) import time import pygame import easygui as gui file = r'D:\CloudMusic\G.E.M.邓紫棋,艾热 ...
保利威HTML5播放器使用文档（参考备用）
2018-11-19 长沙阴不好意思,是转载备用,不是原创的,图片为原创截图,呵呵. 功能特色: 倍速功能(0.5x / 1x / 2x ).加密.截图功能.模式切换.高清标清超清切换: 跑马灯 ...
linux一键电影网站脚本,Linux下HTML5播放器一键生成脚本
原创内容,转载请注明出处: https://www.myzhenai.com.cn/post/2394.html https://www.myzhenai.com/thread-17969-1-1.h ...
html5播放器禁止拖拽功能实例（教学内容禁止拖动观看）
html5播放器禁止拖拽功能实例(常用于场景:企业培训.在线教学内容禁止学员拖动视频进行观看) 实例1:参数开启后,视频教学内容或视频课件将不允许拖动进度条. <div id="pla ...
PHP双码率视频云转码服务系统源码 m3u8切片秒切html5播放器全开源
介绍: PHP双码率视频云转码服务系统源码 m3u8切片秒切html5播放器全开源 PHP双码率视频云转码服务系统源码 m3u8切片秒切版本特点: 1.修正了双码率无法转码.切片问题,优化&quo ...
html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
html5播放器视频倍速播放功能
阿酷TONY 2021-3-24 1. 倍速播放功能可以让视频加速或者减速播放: 2. 在PC端,HTML5播放器能轻松实现倍速播放功能,您可以将视频的播放速度设定为0.5倍,1倍(正常速),1.2倍 ...

视频html5播放器代码实例

视频html5播放器代码实例相关推荐

最新文章

热门文章