你是否有一个梦想？用JavaScript开发一款自定义配置视频播放器

[[358845]]

前言

沉寂了一周了，打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器，为什么会有如此想法?是因为之前看一些学习视频网站时，看到它们做的视频播放器非常Nice!于是，就打算抽空开发一款属于自己的视频播放器。话不多说，一起来实战吧!

项目展示

(这只是一张图片哦~)

这张图就是我们的成品，还等什么?赶紧来实战吧!

实战

我会把完整源码放在github上，欢迎来star，地址在文末。

首先，我们会使用最原生的JavaScript来实现，老大哥肯定要打头阵啊!

一、JavaScript

1.iconfont.css：阿里字体图标文件，你可以在上面找到很多漂亮的图标。

2.index.css：项目样式文件。

3.index.js：项目逻辑文件。

 
 
 
 
  
  
  
     
  
  
     
  
  
       
  
  
         
  
  
         
  
  
      VamVideo(原生js版)   
  
  
         
  
  
         
  
  
       
  
  
       
  
  
         
  
  
           
  
  
            
  
  
  
          src="https://mos-vod-drcn.dbankcdn.cn/P_VT/video_injection/A91343E9D/v3/9AB0A7921049102362779584128/MP4Mix_H.264_1920x1080_6000_HEAAC1_PVC_NoCut.mp4"   
  
  
          />

let timer = null;
let disX = 0;
let disL = 0;
function $(el) {
return document.querySelector(el);
}
function showEl(el) {
$(el).style.display = "block";
}
function hideEl(el) {
$(el).style.display = "none";
}
function setVp(w, h) {
$(".video-player").style.width = w + "px";
$(".video-player").style.height = h + "px";
$(".video-box").style.width = w + "px";
$(".video-box").style.height = h + "px";
$(".pv-bar").style.width = w + "px";
}
// 时间格式化
function changeTime(iNum) {
let iN = parseInt(iNum);
const iH = toZero(Math.floor(iN / 3600));
const iM = toZero(Math.floor((iN % 3600) / 60));
const iS = toZero(Math.floor(iN % 60));
return iH + ":" + iM + ":" + iS;
}
// 整0处理
function toZero(num) {
if (num <= 9) {
return "0" + num;
} else {
return "" + num;
}
}
// 底部控制栏
$(".video-box").onmouseenter = function () {
$(".bottom-tool").style.bottom = "0px";
};
$(".video-box").onmouseleave = function () {
$(".bottom-tool").style.bottom = "-45px";
};
// 倍速播放栏(显示/隐藏)
$(".pv-spnum").onmouseover = function () {
showEl(".selectList");
};
$(".pv-controls").onmouseleave = function () {
hideEl(".selectList");
};
// 播放/暂停
$(".play-btn").onclick = function () {
if ($(".video-player").paused) {
$(".video-player").play();
hideEl(".icon-bofang");
showEl(".icon-zanting");
nowTime();
timer = setInterval(nowTime, 1000);
} else {
$(".video-player").pause();
showEl(".icon-bofang");
hideEl(".icon-zanting");
clearInterval(timer);
}
};
// 总时长
$(".video-player").oncanplay = function () {
$(".pv-duration").innerHTML = changeTime($(".video-player").duration);
};
// 播放结束
$(".video-player").onended = function (params) {
showEl(".icon-bofang");
hideEl(".icon-zanting");
};
// 播放时长
function nowTime() {
$(".pv-currentTime").innerHTML = changeTime($(".video-player").currentTime);
let scale = $(".video-player").currentTime / $(".video-player").duration;
let w = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth;
$(".pv-dot").style.left = scale * w + "px";
$(".pv-played").style.width = scale * w + "px";
}
// 静音/取消静音
$(".pv-iconyl").onclick = function () {
if ($(".video-player").muted) {
$(".video-player").volume = 1;
hideEl(".icon-jingyin");
showEl(".icon-yinliang");
$(".video-player").muted = false;
} else {
$(".video-player").volume = 0;
showEl(".icon-jingyin");
hideEl(".icon-yinliang");
$(".video-player").muted = true;
}
};
let isfullScreen = false;
// 全屏
$(".pv-screen").onclick = function () {
const w = document.documentElement.clientWidth || document.body.clientWidth;
const h = document.documentElement.clientHeight || document.body.clientHeight;
isfullScreen = !isfullScreen;
if (isfullScreen) {
setVp(w, h);
hideEl(".icon-quanping");
showEl(".icon-huanyuan");
} else {
setVp(900, 480);
showEl(".icon-quanping");
hideEl(".icon-huanyuan");
}
};
// 播放进度条
$(".pv-dot").onmousedown = function (ev) {
let ev1 = ev || window.event;
disX = ev1.clientX - $(".pv-dot").offsetLeft;
document.onmousemove = function (ev) {
let ev2 = ev || window.event;
let L = ev2.clientX - disX;
if (L < 0) {
L = 0;
} else if (L > $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth) {
L = $(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth;
}
$(".pv-dot").style.left = L + "px";
let scale = L / ($(".pv-bar").offsetWidth - $(".pv-dot").offsetWidth);
$(".video-player").currentTime = scale * $(".video-player").duration;
nowTime();
};
document.onmouseup = function () {
document.onmousemove = null;
};
return false;
};
// 音量控制
$(".pv-ol").onmousedown = function (ev) {
let ev1 = ev || window.event;
disL = ev1.clientX - $(".pv-ol").offsetLeft;
document.onmousemove = function (ev) {
let ev2 = ev || window.event;
let L = ev2.clientX - disL;
if (L < 0) {
L = 0;
} else if (L > $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth) {
L = $(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth;
}
$(".pv-ol").style.left = L + "px";
let scale = L / ($(".pv-yl").offsetWidth - $(".pv-ol").offsetWidth);
$(".pv-bg").style.width = $(".pv-ol").offsetLeft + "px";
if ($(".pv-ol").offsetLeft !== 0) {
showEl(".icon-yinliang");
hideEl(".icon-jingyin");
} else {
showEl(".icon-jingyin");
hideEl(".icon-yinliang");
}
$(".video-player").volume = scale;
};
document.onmouseup = function () {
document.onmousemove = null;
};
return false;
};
// 播放速度
$(".selectList").onclick = function (e) {
let ev = e || window.event;
hideEl(".selectList");
$(".pv-spnum").innerText = ev.target.innerText;
const value = ev.target.innerText.replace("x", "");
$(".video-player").playbackRate = value;
};

VamVideo(Class类版)
00:00:00
/
00:00:00
1x
0.5x
1x
1.25x
1.5x
2x

class VamVideo {
constructor(vp, attrObj, styleObj) {
this.timer = null;
this.disX = 0;
this.disL = 0;
this.isfullScreen = false;
for (const key in attrObj) {
if (Object.hasOwnProperty.call(attrObj, key)) {
this.$(".video-player").setAttribute(key, attrObj[key]);
}
}
for (const key in styleObj) {
if (Object.hasOwnProperty.call(styleObj, key)) {
this.$(".video-box").style[`${key}`] = styleObj[key];
key === "width"
? (this.vbw = styleObj.width)
: (this.vbw = vp.offsetWidth);
key === "height"
? (this.vbh = styleObj.height)
: (this.vbh = vp.offsetHeight);
}
}
}
$ = (el) => document.querySelector(el);
showEl = (el) => {
this.$(el).style.display = "block";
};
hideEl = (el) => {
this.$(el).style.display = "none";
};
setVp = (w, h) => {
const _w = String(w).indexOf("px") != -1 ? w : w + "px";
const _h = String(h).indexOf("px") != -1 ? h : h + "px";
this.$(".video-player").style.width = _w;
this.$(".video-player").style.height = _h;
this.$(".video-box").style.width = _w;
this.$(".video-box").style.height = _h;
this.$(".pv-bar").style.width = _w;
};
nowTime = () => {
this.$(".pv-currentTime").innerHTML = this.changeTime(
this.$(".video-player").currentTime
);
let scale =
this.$(".video-player").currentTime / this.$(".video-player").duration;
let w = this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth;
this.$(".pv-dot").style.left = scale * w + "px";
this.$(".pv-played").style.width = scale * w + "px";
};
changeTime = (iNum) => {
let iN = parseInt(iNum);
const iH = this.toZero(Math.floor(iN / 3600));
const iM = this.toZero(Math.floor((iN % 3600) / 60));
const iS = this.toZero(Math.floor(iN % 60));
return iH + ":" + iM + ":" + iS;
};
toZero = (num) => {
if (num <= 9) {
return "0" + num;
} else {
return "" + num;
}
};
// 底部控制栏(显示/隐藏)
bottomTup = () => {
this.$(".bottom-tool").style.bottom = "0px";
};
bottomTdow = () => {
this.$(".bottom-tool").style.bottom = "-45px";
};
// 倍速播放栏(显示/隐藏)
selectListShow = () => {
this.showEl(".selectList");
};
selectListHide = () => {
this.hideEl(".selectList");
};
// 播放/暂停
usePlay = () => {
if (this.$(".video-player").paused) {
this.$(".video-player").play();
this.hideEl(".icon-bofang");
this.showEl(".icon-zanting");
this.nowTime();
this.timer = setInterval(this.nowTime, 1000);
} else {
this.$(".video-player").pause();
this.showEl(".icon-bofang");
this.hideEl(".icon-zanting");
clearInterval(this.timer);
}
};
// 总时长
useOnplay = () => {
this.$(".pv-duration").innerHTML = this.changeTime(
this.$(".video-player").duration
);
};
// 播放结束
useEnd = () => {
this.showEl(".icon-bofang");
this.hideEl(".icon-zanting");
};
// 静音
useVolume = () => {
if (this.$(".video-player").muted) {
this.$(".video-player").volume = 1;
this.hideEl(".icon-jingyin");
this.showEl(".icon-yinliang");
this.$(".video-player").muted = false;
} else {
this.$(".video-player").volume = 0;
this.showEl(".icon-jingyin");
this.hideEl(".icon-yinliang");
this.$(".video-player").muted = true;
}
};
// 全屏
fullScreen = () => {
const w = document.documentElement.clientWidth || document.body.clientWidth;
const h =
document.documentElement.clientHeight || document.body.clientHeight;
this.isfullScreen = !this.isfullScreen;
if (this.isfullScreen) {
this.setVp(w, h);
this.hideEl(".icon-quanping");
this.showEl(".icon-huanyuan");
} else {
console.log("w" + this.vbw, "h" + this.vbh);
this.setVp(this.vbw, this.vbh);
this.showEl(".icon-quanping");
this.hideEl(".icon-huanyuan");
}
};
// 播放进度条
useTime = (ev) => {
let ev1 = ev || window.event;
this.disX = ev1.clientX - this.$(".pv-dot").offsetLeft;
document.onmousemove = (ev) => {
let ev2 = ev || window.event;
let L = ev2.clientX - this.disX;
if (L < 0) {
L = 0;
} else if (
L >
this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth
) {
L = this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth;
}
this.$(".pv-dot").style.left = L + "px";
let scale =
L / (this.$(".pv-bar").offsetWidth - this.$(".pv-dot").offsetWidth);
this.$(".video-player").currentTime =
scale * this.$(".video-player").duration;
this.nowTime();
};
document.onmouseup = function () {
document.onmousemove = null;
};
return false;
};
// 音量控制
useListen = (ev) => {
let ev1 = ev || window.event;
this.disL = ev1.clientX - this.$(".pv-ol").offsetLeft;
document.onmousemove = (ev) => {
let ev2 = ev || window.event;
let L = ev2.clientX - this.disL;
if (L < 0) {
L = 0;
} else if (
L >
this.$(".pv-yl").offsetWidth - this.$(".pv-ol").offsetWidth
) {
L = this.$(".pv-yl").offsetWidth - this.$(".pv-ol").offsetWidth;
}
this.$(".pv-ol").style.left = L + "px";
let scale =
L / (this.$(".pv-yl").offsetWidth - this.$(".pv-ol").offsetWidth);
th
分享标题：你是否有一个梦想？用JavaScript开发一款自定义配置视频播放器
文章出自：http://zsjierui.cn/article/dpgeeic.html
其他资讯
免费获取网站建设与品牌策划方案报价
*主要业务范围包括：高端网站建设，集团网站建设(网站建设网站制作)找网站建设公司就上美图齐众。
提交需求
- 手机：13518219792
- 地址：成都市太升南路288号锦天国际A幢1002号
- 24小时服务热线：028-86922220
- 网页设计
- 网站制作
- 网站开发
- 营销网站建设
- 百度快速排名
- 整站网站推广
- 基础维护
- 网站改版
- 网站维护
- 微信二维码
  
  微信二维码
友情链接： kwdaxin.com dgruizhi.cn 营山发电机租赁乐山康明斯发电机成都网站设计班戈网站建设成都楼顶广告牌成都做网站公司四川硅藻泥西云服务器托管
Copyright © 2025 资阳站青羊区美图齐众设计工作室（个体工商户）资阳网站建设公司-选网站建设公司美图齐众！专业的网站制作公司！

All Rights Reserved 版权所有蜀ICP备2025119604号-1

网站建设知识

你是否有一个梦想？用JavaScript开发一款自定义配置视频播放器

其他资讯