web前端：自定义视频播放器，原生js实现窗口自适应，视频/音量进度条应用

最新推荐文章于 2024-02-21 17:11:29 发布
最新推荐文章于 2024-02-21 17:11:29 发布
阅读量1.4k 收藏 6
点赞数 2
分类专栏： 微信小程序 web前端 文章标签： 列表 css js javascript gwt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37056888/article/details/113530363
版权

1.less页面包装，引用混合

//导入播放器基础css
@import "reset.less";
//定义进度条混合
.progress-bar-position() {
    position: relative;
}

.progress-bar-line() {
    //定位：位置不变
    position: absolute;
    //进度条：height：3px BG：#737373
    width: 100%;
    height: 3px;
    //总高25，这里是3，剩余22
    margin-top: 11px;
    background: #737373;
}

.progress-bar-btn() {
    //定位：拖拽
    position: absolute;
    //w/h:w9*h7 BG:white border-radius+2px solid
    width: 15px;
    height: 12px;
    background: white;
    border-radius: 5px;
    //总高7，这里是3，剩余4
    margin-top: -5px;
    background: steelblue;
}

.progress-bar-current() {
    //实时进度条
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    background: skyblue;
    //高度和line相同
    margin-top: 11px;
    height: 3px;
}

* {
    margin: 0;
    padding: 0;
}

#wrap {
    //全屏效果
    height: 100%;
    //overflow: hidden;
    //overflow: auto;
    //滚动条，x轴有，y轴hidden
    overflow-x: auto;
    overflow-y: hidden;
    //  position: absolute;
    //  width: 800px;
    //  height: 800px;
    background: #383838;
    //  border: 1xp solid steelblue;
    //  border-radius: 8%;
    //  box-shadow: 2px 5px 5px #000000;
    //  top: 50%;
    //  left: 50%;
    //  transform: translate3d(-50%,-50%,0);
    text-align: center;
    //避免div之间存在缝隙空间padding
    font-size: 0;
    h1 {
        color: white;
        font-weight: bold;
        font: 20px "微软雅黑";
        margin: 2% auto;
    }
    #video-control {
        //行定位
        position: relative;
        height: 25px;
        background: #2A2A2A;
        //这里设置最小宽度，需要在wrap中放开overflow:auto，否则不生效
        min-width: 600px;
        /*1.视频开关
         * 按钮行row：w:55 h:25
         * 按钮：w:9 h：11
         */
        .video-btn {
            position: absolute;
            width: 55px;
            height: 25px;
            //background: skyblue;
            //修改默认的left top=auto
            left: 0;
            top: 0;
            //span居中
            text-align: center;
            //总高25，span=11，余14空间，上下各7
            margin-top: 7px;
            span {
                display: inline-block;
                width: 9px;
                height: 11px;
                background: url(../img/icon.png) no-repeat;
                &:nth-child(1) {
                    background-position: 0px -23px;
                    margin-right: 10px;
                    //如果具备active属性，则位置移动到stop后面
                    &.active{
                        background-position: 0px -11px;  
                    }
                }
                &:nth-child(2) {
                    background-position: 0px 0px;
                }
            }
        }
        /*2.视频进度条:宽度自适应
         * margin:55 230 
         * height:3px
         * BG:#737373
         */
        .video-progress {
            //相对定位（基于control，需要将min-width给video-control），根据line和btn
            //position: relative;
            //上右下左,宽度自适应，不需要定位
            margin: 0 230px 0 55px;
            height: 25px;
            font-size: 20px;
            .progress-bar-position();
            .progress-line {
                .progress-bar-line();
                .progress-btn {
                    .progress-bar-btn();
                }
            }
            .progress-current {
                .progress-bar-current();
            }
        }
        //3.视频尾部模块
        .video-other-operation {
            //定位，基于video-control
            position: absolute;
            width: 230px;
            height: 25px;
            //不写right，默认auto，下一行，需要指定0
            right: 0;
            bottom: 0;
            //高度统一
            &>div {
                height: 25px;
                float: left;
            }
            //视频时间
            .video-time {
                font: 14px "微软雅黑";
                color: skyblue;
                line-height: 25px;
                text-align: center;
                width: 120px;
                
            }
            .video-audio {
                width: 80px;
                div {
                    height: 25px;
                    float: left;
                }
                .audio-switch {
                    width: 20px;
                    text-align: center;
                    span {
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        margin: 7px auto;
                        background: url(../img/icon.png) no-repeat;
                        background-position: 0 -34px;
                        &.active{
                            background-position: 0 -46px;
                        }
                    }
                }
                .audio-volume {
                    width: 60px;
                    .progress-bar-position();
                    .volume-line {
                        .progress-bar-line();
                        .volume-btn {
                           .progress-bar-btn();
                        }
                    }
                    .volume-current {
                        .progress-bar-current();
                    }
                }
            }
            .video-full-screen {
                width: 30px;
                text-align: center;
                span {
                    display: inline-block;
                    width: 12px;
                    height: 12px;
                    margin: 7px auto;
                    background: url(../img/icon.png) no-repeat;
                    background-position: 0 -58px;
                    &.active{
                        background-position: 0 -70px;
                    }
                }
            }
        }
    }
}

2.css生成样式

html,
body {
  height: 100%;
  overflow: hidden;
}
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* custom */
a {
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
li {
  list-style: none;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
html,
body {
  width: 100%;
}
body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
* {
  margin: 0;
  padding: 0;
}
#wrap {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: #383838;
  text-align: center;
  font-size: 0;
}
#wrap h1 {
  color: white;
  font-weight: bold;
  font: 20px "微软雅黑";
  margin: 2% auto;
}
#wrap #video-control {
  position: relative;
  height: 25px;
  background: #2A2A2A;
  min-width: 600px;
  /*1.视频开关
         * 按钮行row：w:55 h:25
         * 按钮：w:9 h：11
         */
  /*2.视频进度条:宽度自适应
         * margin:55 230 
         * height:3px
         * BG:#737373
         */
}
#wrap #video-control .video-btn {
  position: absolute;
  width: 55px;
  height: 25px;
  left: 0;
  top: 0;
  text-align: center;
  margin-top: 7px;
}
#wrap #video-control .video-btn span {
  display: inline-block;
  width: 9px;
  height: 11px;
  background: url(../img/icon.png) no-repeat;
}
#wrap #video-control .video-btn span:nth-child(1) {
  background-position: 0px -23px;
  margin-right: 10px;
}
#wrap #video-control .video-btn span:nth-child(1).active {
  background-position: 0px -11px;
}
#wrap #video-control .video-btn span:nth-child(2) {
  background-position: 0px 0px;
}
#wrap #video-control .video-progress {
  margin: 0 230px 0 55px;
  height: 25px;
  font-size: 20px;
  position: relative;
}
#wrap #video-control .video-progress .progress-line {
  position: absolute;
  width: 100%;
  height: 3px;
  margin-top: 11px;
  background: #737373;
}
#wrap #video-control .video-progress .progress-line .progress-btn {
  position: absolute;
  width: 15px;
  height: 12px;
  background: white;
  border-radius: 5px;
  margin-top: -5px;
  background: steelblue;
}
#wrap #video-control .video-progress .progress-current {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  background: skyblue;
  margin-top: 11px;
  height: 3px;
}
#wrap #video-control .video-other-operation {
  position: absolute;
  width: 230px;
  height: 25px;
  right: 0;
  bottom: 0;
}
#wrap #video-control .video-other-operation > div {
  height: 25px;
  float: left;
}
#wrap #video-control .video-other-operation .video-time {
  font: 14px "微软雅黑";
  color: skyblue;
  line-height: 25px;
  text-align: center;
  width: 120px;
}
#wrap #video-control .video-other-operation .video-audio {
  width: 80px;
}
#wrap #video-control .video-other-operation .video-audio div {
  height: 25px;
  float: left;
}
#wrap #video-control .video-other-operation .video-audio .audio-switch {
  width: 20px;
  text-align: center;
}
#wrap #video-control .video-other-operation .video-audio .audio-switch span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 7px auto;
  background: url(../img/icon.png) no-repeat;
  background-position: 0 -34px;
}
#wrap #video-control .video-other-operation .video-audio .audio-switch span.active {
  background-position: 0 -46px;
}
#wrap #video-control .video-other-operation .video-audio .audio-volume {
  width: 60px;
  position: relative;
}
#wrap #video-control .video-other-operation .video-audio .audio-volume .volume-line {
  position: absolute;
  width: 100%;
  height: 3px;
  margin-top: 11px;
  background: #737373;
}
#wrap #video-control .video-other-operation .video-audio .audio-volume .volume-line .volume-btn {
  position: absolute;
  width: 15px;
  height: 12px;
  background: white;
  border-radius: 5px;
  margin-top: -5px;
  background: steelblue;
}
#wrap #video-control .video-other-operation .video-audio .audio-volume .volume-current {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  background: skyblue;
  margin-top: 11px;
  height: 3px;
}
#wrap #video-control .video-other-operation .video-full-screen {
  width: 30px;
  text-align: center;
}
#wrap #video-control .video-other-operation .video-full-screen span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 7px auto;
  background: url(../img/icon.png) no-repeat;
  background-position: 0 -58px;
}
#wrap #video-control .video-other-operation .video-full-screen span.active {
  background-position: 0 -70px;
}

3.Reset.css引用样式

html,
body {
  height: 100%;
  overflow: hidden;
}
/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* custom */
a {
  color: #7e8c8d;
  text-decoration: none;
  -webkit-backface-visibility: hidden;
}
li {
  list-style: none;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}
html,
body {
  width: 100%;
}
body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

4.Video-btn-drag拖拽组件Js，函数自调用

/*
 * 拖拽组件，函数自调用
 * 传入参数window，wind=window
 */
(function(wind) {
	//1.为wind绑定对象属性${}
	wind.dragFunc = {};
	//2.callBack暴露拖拽,${}绑定属性dragger
	//js函数：形参列表可以和实参列表不一样
	wind.dragFunc.dragger = function(dragNode, callBack) {
		//1.dragNode初始化位置
		var initialPoint = {
			x: 0,
			y: 0
		};
		//1.鼠标（视口-包括浏览器窗口）初始化位置
		var mousePoint = {
			x: 0,
			y: 0
		};
		/*|--视口mousePoint-x(clientX)--|-------initialPoint鼠标落点-x(offsetLeft)------||*/
		/*|--视口mousePoint-x(clientX)--|-------initialPoint鼠标落点-x(offsetLeft)------|+|--movePoint鼠标移动店-x(clientX)-------|
		  鼠标移动点位置=initialPoint鼠标落点-x + movePoint鼠标移动店-x - mousePoint-x
		 * */
		//2.鼠标落下触发
		dragNode.onmousedown = function(e) {
			//兼容可简写：ev=ev || window.event;默认event带window.，如果ev存在 ||之后不执行 ,如果ev不存在 || 之后执行event
			e = e || event;

			//IE6-6兼容：全局捕获节点位置：setCapture
			if(dragNode.setCapture) {
				dragNode.setCapture();
			}

			//2.1鼠标落下获取:初始点位置
			initialPoint.x = dragNode.offsetLeft;
			initialPoint.y = dragNode.offsetTop;
			//鼠标落下获取：视口位置
			mousePoint.x = e.clientX;
			mousePoint.y = e.clientY;

			//2.3鼠标移动触发
			document.onmousemove = function(e) {
				e = e || event;
				var movePoint = {
					x: 0,
					y: 0
				};
				movePoint.x = e.clientX;
				movePoint.y = e.clientY;

				//这里开始移动，会偏移出x-offsetLeft
				//dragNode.style.left=initialPoint.x+(movePoint.x-mousePoint.x)+"px";

				var dragLeft = initialPoint.x + (movePoint.x - mousePoint.x);
				if(dragLeft < 0) {
					dragLeft = 0;
					//gragNode的width小于父级progress-line.width,需要减去offsetWidth，去掉多余部分
				} else if(dragLeft > dragNode.parentNode.clientWidth - dragNode.offsetWidth) {
					dragLeft = dragNode.parentNode.clientWidth - dragNode.offsetWidth
				}
				//开始移动
				dragNode.style.left = dragLeft + "px";
				/*进度条：progress-current跟踪
				 * 1.存在callBack对象
				 * 2.callback自定义属性有一个move
				 * 3.move的type=function函数，这里move函数在callBack对象中，调用时传入move函数
				 */
				if(callBack && callBack["move"] && typeof callBack["move"] === "function") {
					/*4.调用move函数（回调机制）：obj['prop'](function);
					 * 调用js-->var obj={ 
					 * 	      prop:function(){
					 * 			} 
					 * 		}
					 */
					//第一种，在调用的js中获取dragNode的left
					//callBack["move"]();
					//第二种，call定义node
					callBack["move"].call(dragNode);
				}
			}

			document.onmouseup = function() {
				document.onmouseup = document.onmousemove = null;
				if(document.releaseCapture) {
					document.releaseCapture();
				}
			}

			return false;
		}
	}
})(window)

5.Video-player组件js

$(function() {
	var wrapNode = document.querySelector("#wrap");
	var videoNode = document.querySelector("#wrap > video");
	videoNode.poster = "./img/cubic-3D-camera-web全栈片头_Moment.jpg";
	var videoControlNode = document.querySelector("#wrap > #video-control");
	var videoProgressNode = document.querySelector("#wrap > #video-control > .video-progress");
	//视频进度拖拽btn
	var progressBtnNode = document.querySelector("#wrap > #video-control > .video-progress > .progress-line > .progress-btn");
	//视频进度条current
	var progressCurrentNode = document.querySelector("#wrap > #video-control > .video-progress > .progress-current");
	//进度条总长
	var progressLineNode = document.querySelector("#wrap > #video-control > .video-progress > .progress-line");

	//视频时间总长
	var videoDurationTimeNode = document.querySelector("#wrap > #video-control > .video-other-operation > .video-time > .duration-time");
	//视频当前时间
	var videoCurrentTimeNode = document.querySelector("#wrap > #video-control > .video-other-operation > .video-time > .current-time");
	//获取视频开关按钮
	var videoStartBtn = document.querySelector("#wrap > #video-control > .video-btn > .video-start");
	var videoStopBtn = document.querySelector("#wrap > #video-control > .video-btn > .video-stop");
	//获取音量开关
	var audioSwitchBtn = document.querySelector("#wrap > #video-control > .video-other-operation > .video-audio > .audio-switch");
	//音量按钮btn
	var volumnBtnNode = document.querySelector("#wrap > #video-control > .video-other-operation > .video-audio > .audio-volume > .volume-line > .volume-btn");
	//音量进度条current
	var volumnCurrentNode = document.querySelector("#wrap > #video-control > .video-other-operation > .video-audio > .audio-volume > .volume-current");
	//音量总长度
	var volumeLineNode = document.querySelector("#wrap > #video-control > .video-other-operation > .video-audio > .audio-volume > .volume-line");
	//音量开关
	var volumeSwitch = document.querySelector("#wrap > #video-control > .video-other-operation > .video-audio > .audio-switch >span");
	//同步音量控制
	var volumeSyncFlag = 0;

	//全屏按钮
	var fullScreenNode = document.querySelector("#wrap > #video-control > .video-other-operation > .video-full-screen");
	var fullScreen = document.querySelector("#wrap > #video-control > .video-other-operation > .video-full-screen > span");

	//1.设置视频宽高
	videoNode.width = 800;
	videoNode.height = document.documentElement.clientHeight - videoControlNode.offsetHeight;
	//videoNode.width=800;
	//2.每次用户视口调整，重新获取宽高，video-control<600的最小宽度，则不变
	window.onresize = function() {
		if(document.documentElement.clientWidth >= 600) {
			videoNode.width = document.documentElement.clientWidth;
			videoNode.height = document.documentElement.clientHeight - videoControlNode.offsetHeight;
		}
	}

	//3.视频进度条
	//callBack对象-->move属性-->存在func
	var callBack = {
		move: function() {
			console.log("progress-current开始移动=drag-->progressBtnNode.offsetLeft");
			//第一种，在这里调用progressCurrentNode的left，原生drag组件：callBack["move"]();
			//progressCurrentNode.style.width=progressBtnNode.offsetLeft+"px";
			//第二种，修改drag组件：callBack["move"].call(dragNode);
			progressCurrentNode.style.width = this.offsetLeft + "px";
			//1.获取拖动比率
			var dragRate = this.offsetLeft / (videoProgressNode.clientWidth - progressBtnNode.offsetWidth);
			//2.更新拖动视频时间
			videoNode.currentTime = videoNode.duration * dragRate;
		}
	}
	dragFunc.dragger(progressBtnNode, callBack);

	//5.视频开关按钮
	//定义暂停时间变量，避免进度条继续run
	var runTime = 0;
	videoPlay();

	function videoPlay() {

		//1.开始/暂停按钮
		videoStartBtn.onclick = function() {
			if(videoNode.paused) {
				//当前播放--》 播放时显示stop||点击暂停--》
				//兼容性高于：this.class.add 和 .remove
				addClass(this, "active");
				videoNode.play();
				//进度条run：
				runTime = setInterval(progressRun, 100);
			} else {
				removeClass(this, "active");
				videoNode.pause();
				//清理定时器时间戳
				clearInterval(runTime);
			}
		}
		//2. □ 恢复到初始化时间，并暂停
		videoStopBtn.onclick = function() {
			//这里要联动start按钮变化，不可以使用this
			removeClass(videoStartBtn, "active");
			videoNode.pause();
			clearInterval(runTime);
			//进度条返回原点
			progressBtnNode.style.left = progressCurrentNode.style.width = 0 + "px";
			//视频返回原点
			videoNode.currentTime = 0;
		}
		//3.拖拽<!--请求本地视频拖拽效果异常-->
		videoProgressNode.onclick = function(e) {
			e = e || event;
			addClass(videoStartBtn, "active");
			videoNode.play();
			runTime = setInterval(progressRun, 100);
			//跳到的位置:(持续时间*((视口距离-progressCurrent.offsetLeft)/(progress-line.clientWidth进度线总长 - progressBtnNode.offsetWidth按钮宽度)))
			console.log("拖拽到这里video-currentTime：", videoNode.currentTime);
			videoNode.currentTime = videoNode.duration * ((e.clientX - this.offsetLeft) / (videoProgressNode.clientWidth - progressBtnNode.offsetWidth));
			//更新时间
			videoCurrentTimeNode.innerHTML = timeFormat(videoNode.currentTime);
		}

		function progressRun() {
			//进度条宽度=按钮的left= 播放比例 (video.当前时间/video.持续时间)*(video-progress.clientWidth进度线总长 - progressBtnNode.offsetWidth按钮宽度)
			progressBtnNode.style.left = progressCurrentNode.style.width = (videoNode.currentTime / videoNode.duration) * (videoProgressNode.clientWidth - progressBtnNode.offsetWidth) + "px";
			//更新时间
			videoCurrentTimeNode.innerHTML = timeFormat(videoNode.currentTime);
		}

	}

	//6.视频时间:loadeddata	媒体的第一帧已经加载完毕。则进行时间获取
	videoNode.addEventListener("loadeddata", function() {
		//写入页面时，更新时间格式
		videoDurationTimeNode.innerHTML = timeFormat(videoNode.duration);
	})

	//7.音量控制
	volumnBtnNode.style.left = volumnCurrentNode.style.width = volumeLineNode.clientWidth - volumnBtnNode.offsetWidth + "px";
	audioSwitchBtn.onclick = function() {
		//静音时，显示不静音-->没有active
		if(videoNode.muted) {
			videoNode.muted = false;
			videoNode.volume = 1;
			removeClass(volumeSwitch, "active");
			//拖动后，进行比率运算
			volumeSyncFlag = volumeSyncFlag == 0 ? 1 : volumeSyncFlag;
			volumnBtnNode.style.left = volumnCurrentNode.style.width = (volumeLineNode.clientWidth - volumnBtnNode.offsetWidth) * volumeSyncFlag + "px";

		} else {
			videoNode.muted = true;
			videoNode.volume = 0;
			addClass(volumeSwitch, "active");
			volumnBtnNode.style.left = volumnCurrentNode.style.width = 0 + "px";
		}
	}
	//4.音量进度条
	var callBacks = {
		move: function() {
			volumnCurrentNode.style.width = this.offsetLeft + "px";
			//拖拽时控制音量比率(0-1)之间的比率
			var volumeRate = this.offsetLeft / (volumeLineNode.clientWidth - volumnBtnNode.offsetWidth);
			//保存进度条比率
			volumeSyncFlag = volumeRate;
			videoNode.volume = volumeRate;
			if(videoNode.volume == 0) {
				videoNode.muted = true;
				videoNode.volume = 0;
				addClass(volumeSwitch, "active");
			} else {
				//这里可以使用>0 && <1 做else if判断，也可以直接做else开启
				removeClass(volumeSwitch, "active");
				videoNode.muted = false;
			}
		}
	}
	dragFunc.dragger(volumnBtnNode, callBacks);

	//5.全屏显示
	//全屏flag
	var isFullScreen = false;
	fullScreenNode.onclick = function() {

		if(isFullScreen) {
			// 全屏 ---> 不是全屏 --> remove
			removeClass(fullScreen, "active");
			isFullScreen = false;
			if(document.exitFullscreen) {
				document.exitFullscreen();
			} else if(document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if(document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();
			} else if(document.msExitFullscreen) {
				document.msExitFullscreen();
			}
		} else {
			addClass(fullScreen, "active");
			isFullScreen = true;
			var docElm = document.documentElement;
			//W3C  
			if(docElm.requestFullscreen) {
				docElm.requestFullscreen();
			}
			//FireFox  
			else if(docElm.mozRequestFullScreen) {
				docElm.mozRequestFullScreen();
			}
			//Chrome等  
			else if(docElm.webkitRequestFullScreen) {
				docElm.webkitRequestFullScreen();
			}
			//IE11
			else if(docElm.msRequestFullscreen) {
				docElm.msRequestFullscreen();
			}
		}
	}

	/*
	 * 工具类：class操作
	 */
	function addClass(node, className) {
		var reg = new RegExp("\\b" + className + "\\b");
		if(!reg.test(node.className)) {
			node.className += (" " + className);
		}
	}

	function removeClass(node, className) {
		if(node.className) {
			var reg = new RegExp("\\b" + className + "\\b");
			var classes = node.className;
			node.className = classes.replace(reg, "");
			if(/^\s*$/g.test(node.className)) {
				node.removeAttribute("class");
			}
		} else {
			node.removeAttribute("class");
		}
	}

	//转换时间格式
	function timeFormat(time) {
		//毫秒时间转换整数型
		time = parseInt(time);
		//向下取整
		var hour = addZero(Math.floor(time / 3600));
		//取余3600=秒，不能被取余的秒可以转换为分钟
		var minute = addZero(Math.floor(time % 3600 / 60));
		//不可向下取整，自动四舍五入，去round取消小数点
		var second = addZero(Math.round(time % 60));
		return hour + ":" + minute + ":" + second;

	}
	//时间补零函数
	function addZero(num) {
		var value = "";
		if(num < 10) {
			value = "0" + num;
		} else {
			value = value + num;
		}

		return value;
	}
})

6.html页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title>一刀coder-视频播放器</title>
	</head>
	<link rel="stylesheet" href="css/22-video-player.css" />

	<body>
		<div id="wrap">
			<!--<h1>自定义播放器  一刀coder</h1>
			<hr />-->
			<!--请求本地视频拖拽效果异常，网络视频正常拖动
				线上视频地址：https://cevent-yameng-shop.oss-cn-beijing.aliyuncs.com/cubic-3D-camera-web%E5%85%A8%E6%A0%88%E7%89%87%E5%A4%B4.mp4
			-->
			<video src="video/cubic-3D-camera-web全栈片头_Trim2.mp4"></video>
			<div id="video-control">
				<!--1.视频开关-->
				<div class="video-btn">
					<span class="video-start"></span>
					<span class="video-stop"></span>
				</div>
				<!--2.视频进度条-->
				<div class="video-progress">
					<!--视频进度线及按钮-->
					<div class="progress-line">
						<div class="progress-btn"></div>
					</div>
					<!--当前进度条-->
					<div class="progress-current"></div>
				</div>
				<!--3.尾部模块-->
				<div class="video-other-operation">
					<!--3.1视频时间-->
					<div class="video-time">
						<span class="current-time"></span>/<span class="duration-time"></span>
					</div>
					<!--音量模块-->
					<div class="video-audio">
						<!--3.2音量开关-->
						<div class="audio-switch">
							<span></span>
						</div>
						<!--3.3音量控制按钮-->
						<div class="audio-volume">
							<!--3.4音量线及按钮-->
							<div class="volume-line">
								<div class="volume-btn"></div>
							</div>
							<!--3.5当前音量-->
							<div class="volume-current"></div>
						</div>
					</div>
					<!--3.6全屏按钮-->
					<div class="video-full-screen">
						<span></span>
					</div>
				</div>

			</div>
			<!--<hr />-->
		</div>
	</body>
	<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="js/22-video-btn-drag.js"></script>
	<script type="text/javascript" src="js/22-video-player.js"></script>

</html>

7.效果图

player
player

cevent
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端自定义滚动条
12-14
自定义滚动条
Vue实现video视频倍速播放、调节声音、拖动进度条、生成智能字幕等
Sunnyztg的博客
06-26 8354
在现代化的网站中，视频播放已经成为了不可或缺的一部分。而对于视频播放的需求也越来越多样化，比如倍速播放、调节声音、拖动进度条、生成智能字幕等。本文将介绍如何使用Vue实现这些功能。
video-05-videojs编写（全屏、非全屏）自定义控件！！！！
大雾起了清晨
06-30 2102
兄弟们！！看到这里，你马上就可以自定义控件了，想想是不是都激动啊，但是这篇文章重在思路及简单实现，仔细看。
前端页面如何自适应--4种方法
一步一个脚印，踏实努力，向着目标前进
10-29 6478
前端页面有很多方法可以实现。这里我将介绍五种常用的方法，并提供相应的代码示例。
web端实现视频播放（进度条更新，禁止快进）
qq_45750213的博客
02-21 399
【代码】web端实现视频播放（进度条更新，禁止快进）
原生JS实现视频播放功能
热门推荐
@必意玲
04-15 1万+
准备工作: 一个视频文件 一份字体图标文件 缓冲加载的GIF图标 效果如图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作视频播放</title> <!--引入字体图片--> &l...
前端可视化大屏适配/自适应三种实现方式
m0_49016709的博客
05-16 4094
前端可视化大屏适配的三种解决思路
使用html，css和js给视频设置一个简易进度条
reliedema的博客
03-29 2246
使用html，css和js自制一个简易的视频进度条
【前端实例代码】使用 HTML&& CSS&&JavaScript实现进度条时间特效动画效果 |前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效，收藏起来肯定用的上！
南北极之间
08-15 678
TweenLite是GSAP的主体核心，它用于创建基本动画，是其他各类模块的基础。gsap是一款非常强大的JS动画库，gsap.to,gsap.from,gsap.fromTo是常用的创建动画的方法，这里详细讲解他们用法及区别。GSAP教程之gsap.to, gsap.from与gsap.fromTo详解_前端猿小强的博客-CSDN博客_gsap.to。TimeLineMax是TimelineLite的升级版，在TimelineLite的基础之上，可以有更高级的组织与控制。vars： 目标状态参数。....
web及uniapp中自定义 video 标签样式 （一）
UncleWen007的博客
07-12 641
如何修改web端及基于uniapp的小程序中video标签的默认样式
【源码编号 : MF00089】PHP视频网站源码自适应手机带原生APP源码
最新发布
04-16
此源码是一款视频网站系统，你可以用这个来快速搭建自己的视频网站， 安装简单、界面简洁、易于使用。用户可在网站上面注册登陆上传视频、 发布评论与收藏视频，系统带护眼模式，有利于保护眼睛， 与此同时...
uniapp原生插件-YL视频播放器案例源码
09-22
uniapp原生插件-YL视频播放器案例源码，案例包括播放器的基本使用方法，在线教育场景，小视频（仿抖音）场景，朋友圈场景等...
原生js实现类似fullpage的单页/全屏滚动
10-20
主要介绍了利用原生js实现类似fullpage的全屏滚动的实现方法，文中给出了完整的实例代码，相信对大家的理解和学习具有一定的参考价值，需要的朋友们可以参考借鉴，下面来一起看看吧。
一个纯原生代码编写的H5视频播放器，功能高度完善.zip
05-29
一个纯原生代码编写的H5视频播放器，功能高度完善.zip 功能： 按空格键暂停播放 点击屏幕暂停播放 视频进度条拖拽，区分颜色 鼠标移动到进度条上方显示时间 视频快进慢放 视频声音控制 画中画 整屏播放 双击全屏播放...
前端原生项目尚优选视频课程-视频教程网盘链接提取码下载 .txt
07-14
尚优选是一款HTML、CSS、JavaScript技术综合应用的商城项目，适合初学前端的小伙伴夯实基础，积累项目经验。项目具有很强的实用性，既是对前端基础知识的梳理和整合，同时为后续更多主流技术提供了实际应用的练兵场...
web前端：bootstrap栅格系统：自适应多屏幕布局，手机设备、ipad、PC三端合一
cevent的博客
01-19 1769
1.先看效果图 2.less自定义样式 *{ margin: 0; padding: 0; a{ display: block; text-align: center; color: gray; &:visited{ text-decoration: none !important; } &:focus{ text-d
web前端：canvas绘制画布，文本居中，获取像素点getImageData、放入像素数据putImageData，图文详解
cevent的博客
01-26 1266
1.canvas-font居中图解 2.canvas像素计算pixel图解 3.less * { margin: 0; padding: 0; #wrap { width: 600px; height: 800px; background: tomato; border: 2px solid white; border-radius: 5%; //这里不可使用position，会影响画
web前端：canvas像素化-马赛克mosaic案例，原生js实现图片马赛克复制、覆盖
cevent的博客
01-26 1211
1.canvas图片马赛克原理及区间解析 *每一个mosaic马赛克矩形坐标(i,j) * x=i y=j * mosaic马赛克(0,0)–>纵代表:(0,0) (4,4) -->随机生成像素点区间[0-4] [0-4] * mosaic马赛克(1,0)–>纵向代表：(5,0) (9,4) -->随机生成像素点区间[5-9] [0-4] * mosaic马赛克(0,0
html js判断显示隐藏,web前端：原生js判断元素是否隐藏，jq判断元素是否隐藏【转】...
06-10
可以使用原生 JavaScript 或者 jQuery 来判断元素是否隐藏。 原生 JavaScript 判断元素是否隐藏： 1. 使用 `window.getComputedStyle()` 方法获取元素的 `display` 属性； 2. 如果 `display` 属性为 `none`，则...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值