videojs 的常规使用
初步使用
videojs是一个开源的web视频组件(videojs官网),其使用基于html5的video标签。官方已经给出较为简单的使用例子：
<head>
<link href="https://vjs.zencdn.net/7.1.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/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 video</a>
</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 me</button>
<div class="mask"></div>
<div class="video-box" id="video-box"></div>$(function() {
$('button').click(function() {
$('.video-box').addClass('vjs-big-play-centered').append('<video id="player" class="video-js"></video>');
var player = createVideo("video/1.mp4", "player");
player.ready = videoReady($('.mask'), player);
});
});vjs-big-play-centered是为了让播放按钮居中，添加<video id="player" class="video-js"></video>是使用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:
<!doctype 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">
<!-- Place favicon.ico in the root directory -->
<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>
<!--[if lte IE 9]> <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p> <![endif]-->
<!-- Add your site or application content here -->
<button class="btn btn-secondary">Click me</button>
<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('<script src="js/vendor/jquery-3.3.1.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script type="text/javascript" src="js/video.min.js"></script>
<script src="js/test.js"></script>
</body>
</html>test.js:
$(function() {
$('button').click(function() {
$('.video-box').addClass('vjs-big-play-centered').append('<video id="player" class="video-js"></video>');
var player = createVideo("video/1.mp4", "player");
player.ready = videoReady($('.mask'), player);
});
});
function createVideo(src, id) {
return videojs(id, {
controls: true,
preload: true,
width:1000,
height:600,
sources:[src]
});
}
function videoReady(mask, player) {
var CloseButton = videojs.getComponent('CloseButton');
videojs.registerComponent('CloseButton', CloseButton);
player.addChild('CloseButton');
player.getChild('CloseButton').on('close', function() {
console.log('close');
$('.mask').css('display', 'none');
this.player().dispose();
console.log(this.player());
});
mask.css('display', 'block');
$('.video-box').css({'z-index':'100', 'display': 'block', 'width':'1000px'});
divCenter($("#video-box"));
console.log('ready');
}
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'
});
}效果如下：
京公网安备 11010502036488号