videojs 的常规使用
videojs 的常规使用
初步使用
videojs是一个开源的web视频组件(videojs官网),其使用基于html5的video标签。官方已经给出较为简单的使用例子：
<head>
<link href="https://vjs.zencdn.net/7.1.0/video-js.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/ie8/ie8-version/videojs-ie8.min.js">script>
head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="MY_VIDEO.mp4" type='video/mp4'>
<source src="MY_VIDEO.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 videoa>
p>
video>
<script src="https://vjs.zencdn.net/7.1.0/video.js">script>
body>用官方的CDN可用比较慢，建议将video.js以及video.css下载到本地。
<video id="my-video" class="video-js" controls preload="auto" width="1000" height="800" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
video>video-js这个class是必须包含的，其描述了videojs的布局。controls是控制栏，preload是预加载，poster是指视频海报，即视频未播放时显示的图片。data-setup是属性设置，即视频属性配置，乐意的话你可用将属性放在这里来设置：
原：
<video controls autoplay preload="auto" ...>修改后：
<video data-setup='{"controls": true, "autoplay": false, "preload": "auto"}'...>source标签用来指示视频源：
<video id="my-player" class="video-js">
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
<source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
video>例子
简单的基础有了，下面讲讲怎么用遮罩层配合videojs来使用：
首先，用一个button来触发遮罩层，当按钮被点击，弹出遮罩层以及视频：
<button class="btn btn-secondary">Click mebutton>
<div class="mask">div>
<div class="video-box" id="video-box">div>$(function() {
$('button').click(function() {
$('.video-box').addClass('vjs-big-play-centered').append('');
var player = createVideo("video/1.mp4", "player");
player.ready = videoReady($('.mask'), player);
});
});vjs-big-play-centered是为了让播放按钮居中，添加是使用videojs所必须的。
函数createVideo,传入播放源和videojs所在video元素的id,配置videojs：
function createVideo(src, id) {
return videojs(id, {
controls: true,
preload: true,
width:1000,
height:600,
sources:[src]
});
}函数videoReady，注册关闭按钮：
function videoReady(mask, player) {
var CloseButton = videojs.getComponent('CloseButton'); //获取关闭按钮的组件
videojs.registerComponent('CloseButton', CloseButton); //注册该组件
player.addChild('CloseButton'); //添加关闭按钮到播放器
player.getChild('CloseButton').on('close', function() {//监听关闭事件
$('.mask').css('display', 'none'); //隐藏遮罩层
this.player().dispose(); //释放播放器所占资源
});
mask.css('display', 'block'); //开启遮罩层
//配置视频所在的div的属性
$('.video-box').css({'z-index':'100', 'display': 'block', 'width':'1000px'});
divCenter($("#video-box")); //让视频所在div一直处于屏幕中间
}
function divCenter($object) {
var top = ($(window).height() - $object.height()) / 2;
var left = ($(window).width() - $object.width()) / 2;
var scrollTop = $(document).scrollTop();
var scrollLeft = $(document).scrollLeft();
$object.css({
'position':'absolute',
'top': top + scrollTop + 'px',
'left': left + scrollLeft + 'px'
});
}这里出现了两个新的函数：videojs.getComponent(String name)和videojs.registerComponent(String name, Function Comp),实际上和这两个函数常用的还有一个函数：videojs.extend(Function component, Object properties)
videojs.getComponent(String name): 从videojs中获取组件的构造函数videojs.registerComponent(String name, Function Comp): 注册该组件的构造函数到当前环境中videojs.extend(Function component, Object properties): 提供属性继承，可以从一个组件的构造函数继承一些东西，并且返回一个新的构造函数。
在使用的时候，一般是先用videojs.getComponent(String name)获取要使用的组件的构造函数，如果你要自定义控件，则使用videojs.extend(Function component, Object properties):来继承那个组件，并且编写你自己的控件。然后用videojs.extend(Function component, Object properties)来注册控件，最后用addChild使用控件。
完整代码如下，这里使用了HTML5 Boilerplate和boostrap这两个框架，以及jQuery库。
遮罩层css:
.mask {
top: 0;
right: 0;
bottom: 0;
left: 0;
position: fixed;
opacity: 0.6;
filter: alpha(opacity=60);
background-color: #000;
display: none;
}
.video-box {
display: none;
}test.html:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/video-js.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/test.css">
head>
<body>
<button class="btn btn-secondary">Click mebutton>
<div class="mask">div>
<div class="video-box" id="video-box">div>
<script src="js/vendor/modernizr-3.6.0.min.js">script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous">script>
<script>window.jQuery || document.write('