Bros! ! Seeing this, you can customize the control right away. Think about it, are you excited, but this article focuses on ideas and simple implementation, so read carefully.
Table of contents
2. Implementation scheme (Scheme 2 is the best)
2.1 Solution 1 (only non-full-screen controls can be realized)
2.2 Method 2 (full screen and non-full screen can be realized!!)
2.2.1 Ideas (look carefully, it is very important!!!)
1. Control classification
I divide the controls into full-screen controls and non-full-screen controls, because some things only need to be displayed in full screen
But the full-screen control is a bit weird, and it's hard to write without thinking
2. Implementation scheme ( Scheme 2 is the best )
2.1 Solution 1 (only non-full-screen controls can be realized)
2.1.1 Ideas
We can achieve it simply, that is, the css layer can cover the above, (not in full screen)
2.1.2 Effect
2.1.3 Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电视台</title>
<!--引入video.js文件-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<style type="text/css">
.waike {
position: relative;
}
#kongJianID {
position: absolute;
top: 10px;
left: 10px;
z-index: 9999;
background-color: red;
}
</style>
</head>
<body>
<div class="waike">
<video id="example-video" class="video-js">
</video>
<div id="kongJianID">
<button class="control" onclick=operation("play")>播放</button>     
<button class="control" onclick=operation("stop")>停止</button>     
<button class="control" onclick=operation("reload")>重载</button>     
<button class="control" onclick=operation("reset")>重置</button>     
<button class="control" onclick=operation("fastForward")>快进</button>     
<button class="control" onclick=operation("back")>后退</button>     
<button class="control" onclick=operation("volumeUp")>音量+</button>     
<button class="control" onclick=operation("volumeDown")>音量-</button>     
<button class="control" onclick=operation("fullScreen")>全屏</button>     
<button class="control" onclick=operation("exitFullScreen")>退出全屏</button><br /><br /><br />
</div>
</div>
</body>
</html>
<script type="text/javascript">
var kongJianDom = null
var videoDom = null
// video标签id,
// 配置选项(data-setup='{}'),
// videojs初始化完成回调函数
// var kongJianChange = () => {
// kongJianDom = document.getElementById("kongJianID")
// videoDom = document.getElementById("example-video")
// videoDom.appendChild(kongJianDom)
// }
var myPlayer = videojs('example-video', {
title: 'Oceans',
autoplay: true, // 设置自动播放
muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
preload: 'auto', // 预加载
controls: true, // 显示播放的控件
fluid: true, // 自适应宽高
playbackRates: [0.5, 1, 1.5, 2, 3, 4],
"sources": [{
src: 'https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4',
type: 'video/mp4'
}],
controlBar: {
// 设置控制条组件
currentTimeDisplay: true,
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: true,
volumePanel: {
inline: true
},
children: [{
name: 'playToggle'
}, // 播放/暂停按钮
{
name: 'currentTimeDisplay'
}, // 视频当前已播放时间
{
name: 'progressControl'
}, // 播放进度条
{
name: 'durationDisplay'
}, // 视频播放总时间
{
// 倍速播放
name: 'playbackRateMenuButton',
playbackRates: [0.5, 1, 1.5, 2]
},
{
name: 'volumePanel', // 音量控制
inline: false // 不使用水平方式
},
{
name: 'FullscreenToggle'
} // 全屏
]
}
}, function onPlayerReady() {
// var myPlayer = this;
//在回调函数中，this代表当前播放器，
//可以调用方法，也可以绑定事件。
/**
* 事件events 绑定事件用on 移除事件用off
*/
this.on('suspend', function () {//延迟下载
console.log("延迟下载")
});
this.on('loadstart', function () { //客户端开始请求数据
console.log("客户端开始请求数据")
});
this.on('fullscreenchange', function () { //客户端开始请求数据
console.log("全屏切换事件")
});
this.on('progress', function () {//客户端正在请求数据
console.log("客户端正在请求数据")
});
this.on('abort', function () {//客户端主动终止下载（不是因为错误引起）
console.log("客户端主动终止下载")
});
this.on('error', function () {//请求数据时遇到错误
console.log("请求数据时遇到错误")
});
this.on('stalled', function () {//网速失速
console.log("网速失速")
});
this.on('play', function () {//开始播放
console.log("开始播放")
});
this.on('pause', function () {//暂停
console.log("暂停")
});
this.on('loadedmetadata', function () {//成功获取资源长度
console.log("成功获取资源长度")
});
this.on('loadeddata', function () {//渲染播放画面
console.log("渲染播放画面")
});
this.on('waiting', function () {//等待数据，并非错误
console.log("等待数据")
});
this.on('playing', function () {//开始回放
console.log("开始回放")
});
this.on('canplay', function () {//可以播放，但中途可能因为加载而暂停
console.log("可以播放，但中途可能因为加载而暂停")
});
this.on('canplaythrough', function () { //可以播放，歌曲全部加载完毕
console.log("可以播放，歌曲全部加载完毕")
});
this.on('seeking', function () { //寻找中
console.log("寻找中")
});
this.on('seeked', function () {//寻找完毕
console.log("寻找完毕")
});
this.on('timeupdate', function () {//播放时间改变
console.log("播放时间改变")
});
this.on('ended', function () {//播放结束
console.log("播放结束")
});
this.on('ratechange', function () {//播放速率改变
console.log("播放速率改变")
});
this.on('durationchange', function () {//资源长度改变
console.log("资源长度改变")
});
this.on('volumechange', function () {//音量改变
console.log("音量改变")
});
});
/**
* 方法
*/
function operation(param) {
console.log(param)
if ("play" == param) { //开始播放
myPlayer.play();
} else if ("stop" == param) { //停止播放
myPlayer.pause();
} else if ("fastForward" == param) { //快进
var whereYouAt = myPlayer.currentTime();
myPlayer.currentTime(10 + whereYouAt);
} else if ("reload" == param) { //重新加载
myPlayer.pause();
myPlayer.load();
myPlayer.play();
} else if ("back" == param) { //后退
var whereYouAt = myPlayer.currentTime();
myPlayer.currentTime(whereYouAt - 10);
} else if ("fullScreen" == param) { //全屏
myPlayer.requestFullscreen();
} else if ("exitFullScreen" == param) { //退出全屏
myPlayer.exitFullscreen();
} else if ("volumeUp" == param) { //音量加
var howLoudIsIt = myPlayer.volume();
myPlayer.volume(howLoudIsIt + 10);
} else if ("volumeDown" == param) { //音量减
var howLoudIsIt = myPlayer.volume();
console.log(howLoudIsIt)
myPlayer.volume(howLoudIsIt - 10);
} else if ("reset" == param) { //重置，视频不会播放
myPlayer.reset();
}
}
</script>2.2 Method 2 (full screen and non-full screen can be realized!!)
2.2.1 Ideas (look carefully, it is very important!!!)
I wrote this for a long time when I was writing the project, because I had no idea, I needed to write a full-screen control, but I tried all kinds of solutions, no matter what level of coverage, it didn’t work, then I looked at the dom structure, only the id is The dom wrapped in the example-video box will only be displayed in full screen , so I wondered if it would be possible to create a dom and then add it here . I tested it and it was feasible , but I found out that creating dom, it is very difficult to write, because my page has a lot of logic , I asked the boss of the company , and the boss provided a great idea : write the page first, and then move the entity dom to the corresponding position! ! !
2.2.2 Effect
non-full screen
full screen
2.2.3 Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电视台</title>
<!--引入video.js文件-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.3.0/video.min.js"></script>
<style type="text/css">
.waike {
position: relative;
}
#kongJianID {
position: absolute;
top: 10px;
left: 10px;
z-index: 9999;
background-color: red;
}
</style>
</head>
<body>
<div class="waike">
<video id="example-video" class="video-js">
</video>
<div id="kongJianID">
<button class="control" onclick=operation("play")>播放</button>     
<button class="control" onclick=operation("stop")>停止</button>     
<button class="control" onclick=operation("reload")>重载</button>     
<button class="control" onclick=operation("reset")>重置</button>     
<button class="control" onclick=operation("fastForward")>快进</button>     
<button class="control" onclick=operation("back")>后退</button>     
<button class="control" onclick=operation("volumeUp")>音量+</button>     
<button class="control" onclick=operation("volumeDown")>音量-</button>     
<button class="control" onclick=operation("fullScreen")>全屏</button>     
<button class="control" onclick=operation("exitFullScreen")>退出全屏</button><br /><br /><br />
</div>
</div>
</body>
</html>
<script type="text/javascript">
var kongJianDom = null
var videoDom = null
// video标签id,
// 配置选项(data-setup='{}'),
// videojs初始化完成回调函数
var kongJianChange = () => {
//核心函数
kongJianDom = document.getElementById("kongJianID")
videoDom = document.getElementById("example-video")
videoDom.appendChild(kongJianDom)
}
var myPlayer = videojs('example-video', {
title: 'Oceans',
autoplay: true, // 设置自动播放
muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
preload: 'auto', // 预加载
controls: true, // 显示播放的控件
fluid: true, // 自适应宽高
playbackRates: [0.5, 1, 1.5, 2, 3, 4],
"sources": [{
src: 'https://jf360videos.peopletech.cn/production/464f2fe20b1211ee83bef3d9bb3dfecd_1_video.mp4',
type: 'video/mp4'
}],
controlBar: {
// 设置控制条组件
currentTimeDisplay: true,
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: true,
volumePanel: {
inline: true
},
children: [{
name: 'playToggle'
}, // 播放/暂停按钮
{
name: 'currentTimeDisplay'
}, // 视频当前已播放时间
{
name: 'progressControl'
}, // 播放进度条
{
name: 'durationDisplay'
}, // 视频播放总时间
{
// 倍速播放
name: 'playbackRateMenuButton',
playbackRates: [0.5, 1, 1.5, 2]
},
{
name: 'volumePanel', // 音量控制
inline: false // 不使用水平方式
},
{
name: 'FullscreenToggle'
} // 全屏
]
}
}, function onPlayerReady() {
// var myPlayer = this;
//在回调函数中，this代表当前播放器，
//可以调用方法，也可以绑定事件。
/**
* 事件events 绑定事件用on 移除事件用off
*/
this.on('suspend', function () {//延迟下载
console.log("延迟下载")
});
this.on('loadstart', function () { //客户端开始请求数据
console.log("客户端开始请求数据")
});
this.on('fullscreenchange', function () { //客户端开始请求数据
console.log("全屏切换事件")
});
this.on('progress', function () {//客户端正在请求数据
console.log("客户端正在请求数据")
});
this.on('abort', function () {//客户端主动终止下载（不是因为错误引起）
console.log("客户端主动终止下载")
});
this.on('error', function () {//请求数据时遇到错误
console.log("请求数据时遇到错误")
});
this.on('stalled', function () {//网速失速
console.log("网速失速")
});
this.on('play', function () {//开始播放
console.log("开始播放")
});
this.on('pause', function () {//暂停
console.log("暂停")
});
this.on('loadedmetadata', function () {//成功获取资源长度
console.log("成功获取资源长度")
kongJianChange()
});
this.on('loadeddata', function () {//渲染播放画面
console.log("渲染播放画面")
});
this.on('waiting', function () {//等待数据，并非错误
console.log("等待数据")
});
this.on('playing', function () {//开始回放
console.log("开始回放")
});
this.on('canplay', function () {//可以播放，但中途可能因为加载而暂停
console.log("可以播放，但中途可能因为加载而暂停")
});
this.on('canplaythrough', function () { //可以播放，歌曲全部加载完毕
console.log("可以播放，歌曲全部加载完毕")
});
this.on('seeking', function () { //寻找中
console.log("寻找中")
});
this.on('seeked', function () {//寻找完毕
console.log("寻找完毕")
});
this.on('timeupdate', function () {//播放时间改变
console.log("播放时间改变")
});
this.on('ended', function () {//播放结束
console.log("播放结束")
});
this.on('ratechange', function () {//播放速率改变
console.log("播放速率改变")
});
this.on('durationchange', function () {//资源长度改变
console.log("资源长度改变")
});
this.on('volumechange', function () {//音量改变
console.log("音量改变")
});
});
/**
* 方法
*/
function operation(param) {
console.log(param)
if ("play" == param) { //开始播放
myPlayer.play();
} else if ("stop" == param) { //停止播放
myPlayer.pause();
} else if ("fastForward" == param) { //快进
var whereYouAt = myPlayer.currentTime();
myPlayer.currentTime(10 + whereYouAt);
} else if ("reload" == param) { //重新加载
myPlayer.pause();
myPlayer.load();
myPlayer.play();
} else if ("back" == param) { //后退
var whereYouAt = myPlayer.currentTime();
myPlayer.currentTime(whereYouAt - 10);
} else if ("fullScreen" == param) { //全屏
myPlayer.requestFullscreen();
} else if ("exitFullScreen" == param) { //退出全屏
myPlayer.exitFullscreen();
} else if ("volumeUp" == param) { //音量加
var howLoudIsIt = myPlayer.volume();
myPlayer.volume(howLoudIsIt + 10);
} else if ("volumeDown" == param) { //音量减
var howLoudIsIt = myPlayer.volume();
console.log(howLoudIsIt)
myPlayer.volume(howLoudIsIt - 10);
} else if ("reset" == param) { //重置，视频不会播放
myPlayer.reset();
}
}
</script>3. The full-screen control and non-full-screen control are over here. You must have thought of how those cool video players are made.
There is one point that the blogger has not tried here, that is, how to write a full-screen control without using videojs
Anyone who knows about it can put it in the comment area, and everyone can learn together! ! !