VideoJS视频播放器常用参数说明和示例代码
网上大量搬运内容很多已经过期失效了，今天做了一个demo引用的最新的videojs版本，完全能跑得起来，相比默认的播放器做了些改变，而且加了视频上的覆盖层做水印，水印插件用的是这个，可以用文字或png图片两种方式做视频水印，主要做了以下改变：
- 播放按钮放到了中间位置
- 控制栏的一些样式变化
- 集合了常用的控制按钮：播放进度：当前时间/总时间、声音大小、播放速度、画中画、全屏等
- 屏蔽了视频播放区的右键功能，禁止另存视频
videojs目前支持两种方法来配置参数，一是和vuejs那样在html的video标签中加入属性来实现，二是最常见的javascripe来配置，因人而异吧，对于JavaScript不熟悉的同学来说在html中配置显然更友好，但是为了dom代码的简洁性个人更喜欢用js来配置，下面是示例文件代码
<!doctype html>
<html>
<head>
<link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
<!-- CSS -->
<link href="plugins/watermark/title.css" rel="stylesheet">
<!-- JS -->
<style type="text/css">
/*
.video-js .vjs-time-control {
display: block;
}
.video-js .vjs-remaining-time {
display: none;
}
*/
.video-js .vjs-big-play-button {
left: 50% !important;
top: 50% !important;
/*
width: 20%;
height: 20%;
*/
}
.video-js .vjs-play-control:before {
}
.video-js{ /* 给.video-js设置字体大小以统一各浏览器样式表现，因为video.js采用的是em单位 */
font-size: 14px;
}
.video-js button{
outline: none;
}
.video-js.vjs-fluid,
.video-js.vjs-16-9,
.video-js.vjs-4-3{ /* 视频占满容器高度 */
height: 100%;
background-color: #161616;
}
.vjs-poster{
background-color: #161616;
}
.video-js .vjs-big-play-button{ /* 中间大的播放按钮 */
font-size: 2.5em;
line-height: 2.3em;
height: 2.5em;
width: 2.5em;
-webkit-border-radius: 2.5em;
-moz-border-radius: 2.5em;
border-radius: 2.5em;
background-color: rgba(115,133,159,.5);
border-width: 0.12em;
margin-top: -1.25em;
margin-left: -1.75em;
border-color: #ffb845 !important; /*暂停按钮颜色*/
}
.vjs-icon-play:before, .video-js .vjs-play-control .vjs-icon-placeholder:before, .video-js .vjs-big-play-button .vjs-icon-placeholder:before{
color: #ffb845 !important; /*暂停按钮颜色*/
}
.video-js.vjs-paused .vjs-big-play-button{ /* 视频暂停时显示播放按钮 */
display: block;
}
.video-js.vjs-error .vjs-big-play-button{ /* 视频加载出错时隐藏播放按钮 */
display: none;
}
.vjs-loading-spinner { /* 加载圆圈 */
font-size: 2.5em;
width: 2em;
height: 2em;
border-radius: 1em;
margin-top: -1em;
margin-left: -1.5em;
}
.video-js .vjs-control-bar{ /* 控制条默认显示 */
display: flex;
}
.video-js .vjs-time-control{display:block;}
.video-js .vjs-remaining-time{display: none;}
.vjs-button > .vjs-icon-placeholder:before{ /* 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样 */
font-size: 22px;
line-height: 1.9;
}
.video-js .vjs-playback-rate .vjs-playback-rate-value{
line-height: 2.4;
font-size: 18px;
}
/* 进度条背景色 */
.video-js .vjs-play-progress{
color: #ffb845;
background-color: #ffb845;
}
.video-js .vjs-progress-control .vjs-mouse-display{
/*background-color: #ffb845;*/
background-color: #FF0000;
}
.vjs-mouse-display .vjs-time-tooltip{
padding-bottom: 6px;
background-color: #ffb845;
}
.video-js .vjs-play-progress .vjs-time-tooltip{
display: none!important;
}
</style>
</head>
<body>
<!--
controls
preload="auto"
width="640"
height="auto"
poster="demo.jpg"
data-setup="{}"
playsinline="true"
-->
<video
id="myVideo"
class="video-js"
>
<!--
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
<source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm" />
-->
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
<script src='plugins/watermark/ITMAN_title.js'></script>
<script type="text/javascript">
//const player = videojs('myVideo');
var player = videojs(document.getElementById('myVideo'), {
controls: true, // 是否显示控制条
poster: 'http://vjs.zencdn.net/v/oceans.png', // 视频封面图地址
preload: 'auto',
autoplay: false,
fluid: true, // 自适应宽高
language: 'zh-CN', // 设置语言
muted: false, // 是否静音
inactivityTimeout: false, //自动隐藏控制栏
playbackRates: [0.5, 1, 1.5, 2], //播放速度
playsinline: true, //解决在iPhone中播放时自动全屏问题
controlBar: { // 设置控制条组件
/* 设置控制条里面组件的相关属性及显示与否 */
/*
'currentTimeDisplay':true,
'timeDivider':true,
'durationDisplay':true,
'remainingTimeDisplay':true,
volumePanel: {
inline: true,
},
*/
/* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
children: [
{name: 'playToggle'}, // 播放/暂停按钮
{name: 'currentTimeDisplay'}, // 视频当前已播放时间
{name: 'progressControl'}, // 播放进度条
{name: 'durationDisplay'}, // 视频播放总时间
{
name: 'PlaybackRateMenuButton', // 倍数播放，可以自己设置
},
{
name: 'volumePanel', // 音量控制
inline: false, // 不使用水平方式
},
{
name: 'pictureInPictureToggle' //画中画
},
{
name: ''
},
{
name: 'FullscreenToggle' // 全屏
},
]
},
sources:[ // 视频来源路径
{
src: 'http://vjs.zencdn.net/v/oceans.mp4',
type: 'video/mp4',
poster: 'http://vjs.zencdn.net/v/oceans.png'
}
]
}, function (){
console.log('视频可以播放了',this);
});
player.ITMAN_title({
//file:"路徑/浮水印圖片",
text: '恒馨博客',
opacity: 0.6,
url:"https://www.sipmv.com"
});
const noContext = document.getElementById('myVideo');
noContext.addEventListener('contextmenu', e => {
e.preventDefault();
});
</script>
</body>
</html>