1、 使用video.js在body中
<video id="example_video_1" class="video-js vjs-default-skin" controls data-setup='{"example_option":true}'>
<source src="./video/PARAiz5RqqQuAKp8CV9@@ld.mp4" type='video/mp4' />
</video>
2、引入video.js
<script src="./video/jquery-3.0.0.min.js"></script>
<script src="./video/js/video.js"> </script>
注意：还要引入video.css，如果不引入会有问题，如果在页面中icon图标，尽量将icon的css样式放在video.css的下面。会出现层叠现象。
<link rel="stylesheet" href="./video/js/video-js.css">
3、设置播放器底部的边框样式，在浏览器刷新的情况下就调用
$(document).ready(function () {
//设置底部样式
$('.vjs-control-bar').css({
bottom: '-3.7rem',
display: 'block',
height: '60px',
'line-height': '60px'
})
//当设置底部显示以后，所有标签都会在左侧显示。所以给加一个定位，同时让他居中显示，所以距离顶部位置17px
$('.vjs-control').css({
position: 'absolute',
top: '17px'
})
// 全屏按钮
$('.vjs-fullscreen-control').css({
right: '40px'
})
// 音量按钮
$('.vjs-volume-menu-button').css({
right: '108px'
})
// 播放按钮隐藏
$('.vjs-play-control').css({
display: 'none'
})
})
4、在底部添加需要的按钮
var icon =
'<div class="clearR" style="height: 30px;line-height: 30px; width:60px;"><i class="iconfont icon-shezhi sheZhi" style=" height: 30px;line-height: 30px; width:30px;" ></i><div class="clearSon"><div class="clearUltra ">超清1080 </div> <div class="highClear">高清720 </div> <div class="StandardClear">标清480 </div> </div> </div>'
var html =
'<button class="tongji" >统计</button> <button class="tiwen" >提问</button> '
var time =
'<div class="delayTime"><p class="delay">20ms</p> <p class="goTime">00:00 </p></div>'
//浏览器刷新就添加
$(document).ready(function () {
//在节点后面添加元素.after() 在节点前面添加元素.before()
$('.vjs-volume-menu-button').before(time)
$('.vjs-volume-menu-button').before(html)
$('.vjs-volume-menu-button').after(icon)
//因为不需要其他的内容所以都删除掉
$('.vjs-progress-control ').remove()
$('.vjs-remaining-time').remove()
$('.vjs-live-display').remove()
//设置css样式
$('.tongji').css({
position: 'absolute',
bottom: '15px',
right: '350px',
'background-color': '#F39800',
height: '30px',
width: '80px',
'line-height': '30px',
'border-radius': '4px'
})
$('.tiwen').css({
position: 'absolute',
bottom: '15px',
right: '240px',
'background-color': '#6ACE48',
height: '30px',
width: '80px',
'line-height': '30px',
'border-radius': '4px'
})
$('.clearR').css({
position: 'absolute',
'text-align': 'center',
top: '17px',
right: '64px'
})
$('.clearSon').css({
display: 'none',
position: 'absolute',
height: '114px',
'font-size': ' 14px',
color: '#999',
'text-align': 'center',
'background-image': 'url(./images/bg_qingxidu.png)',
top: '-119px',
right: '-8px'
})
// 超清样式
$('.clearUltra').css({
'margin-top': '6px',
width: '78px',
height: '14px'
})
// 高清样式
$('.highClear').css({
margin: '18px 0',
height: '14px'
})
$('.delayTime').css({
display: 'flex',
'justify-content': ' flex-start'
})
// 延迟样式
$('.delay').css({
'font-size': '14px',
'margin-left': '40px',
color: '#7DF87C',
width: '100PX'
})
// 已直播样式
$('.goTime').css({
'font-size': '14px',
color: '#FFF',
width: '162PX'
})
// 鼠标进入离开音量 提问 统计样式
$('.vjs-volume-menu-button')
.mouseover(function () {
$('.tiwen').css({
transition: 'all 0.4s',
right: '240px'
})
$('.tongji').css({
transition: 'all 0.4s',
right: '350px'
})
})
.mouseout(function () {
$('.tiwen').css({
right: '160px',
transition: 'all 0.4s'
})
$('.tongji').css({
transition: 'all 0.4s',
right: '270px'
})
})
// 鼠标进入离开颜色变更 超清
$('.clearUltra')
.mouseover(function () {
// $("#test").removeClass("cur");
$(this).css({
color: '#7DF87C'
})
})
.mouseout(function () {
$(this).css({
color: '#999'
})
})
// 鼠标进入离开颜色变更 高清
$('.highClear')
.mouseover(function () {
// $("#test").removeClass("cur");
$(this).css({
color: '#7DF87C'
})
})
.mouseout(function () {
$(this).css({
color: '#999'
})
})
// 鼠标进入离开颜色变更 标清
$('.StandardClear')
.mouseover(function () {
// $("#test").removeClass("cur");
$(this).css({
color: '#7DF87C'
})
})
.mouseout(function () {
$(this).css({
color: '#999'
})
})
// 点击设置icon显示清晰度
$('.sheZhi').click(function () {
if (flagR) {
flagR = false
$('.clearSon').show()
} else {
flagR = true
$('.clearSon').hide()
}
})
// 鼠标点击后隐藏超清等
$('.clearUltra').click(function () {
$('.clearSon').hide()
})
// 鼠标点击后隐藏超清等
$('.highClear').click(function () {
$('.clearSon').hide()
})
// 鼠标点击后隐藏超清等
$('.StandardClear').click(function () {
$('.clearSon').hide()
})
})