安装video.js
video.js提供了多种安装方式，你可以根据项目的实际情况选择以下任意一种方式即可。
CDN
从 jsdelivr 安装 video.js
从 bootcdn 安装 video.js
从 unpkg 安装 video.js
其他cdn……
我们以7.10.2版的jsdelivr为例，需要引入的CDN链接为
https://unpkg.com/video.js@7.10.2/dist/video-js.min.css
https://unpkg.com/video.js@7.10.2/dist/video.min.js
完整代码为：
<html>
<head>
<link href="https://unpkg.com/video.js@7.10.2/dist/video-js.min.css" rel="stylesheet" />
<!-- 如果要支持IE8，请使用v7之前的video.js，并且引入下面js垫片，来保障video.js中使用的js语法能够兼容到ie8。-->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video
id="my-player"
class="video-js"
controls
preload="auto"
width="640"
height="264"
poster="http://vjs.zencdn.net/v/oceans.png"
>
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
<p class="vjs-no-js">
如果想使用video.js，请确保浏览器可以运行JavaScript，并且支持
<a href="https://videojs.com/html5-video-support/" target="_blank"
>HTML5 video</a>
</p>
</video>
<script src="https://unpkg.com/video.js@7.10.2/dist/video.min.js"></script>
<script>
let options = {};
let player = videojs('my-player', options, function onPlayerReady() {
videojs.log('播放器准备好了!');
// In this context, `this` is the player that was created by Video.js.
this.play();
this.on('ended', function() {
videojs.log('播放结束!');
});
});
</script>
</body>
</html>
NPM安装
我们可以使用npm包安装video.js。npm包的地址为video.js
安装命令
$ npm install --save-dev video.js
或者使用yarn
$ yarn add video.js -D
我们以vue为例，引入video.js：
<template>
<div class="example example1">
<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'
muted
>
<source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"/>
</video>
</div>
</template>
<script>
// 引入video.js先关的js和css
import videojs from 'video.js'
import "video.js/dist/video-js.min.css"
export default {
name: 'App',
mounted(){
// 添加初始化宽和高，否则加载播放器的时候会闪一下
let options = {width:960,height:400}
videojs('my-player', options, function onPlayerReady() {
videojs.log('播放器准备好了!');
// 最新的浏览器一般禁止video自动播放，直接调用play()会报错。只有用户在页面上操作后或者在video标签上添加muted（静音）属性，才能调用play函数。本案例是在video标签上添加了muted属性。
this.play();
this.on('ended', function() {
videojs.log('播放结束!');
});
});
}
}
</script>
IE浏览器
从版本v7开始，video.js将不再支持ie11之前的浏览器，包括ie8、9、10。原因是这些浏览器不符合安全标准，且使用量占比较小。如果想在IE8、9、10中使用video.js，请使用v7版本之前的video.js。
并且因为v7版本之前的video.js中使用了ES5相关语法，在IE8中使用video.js的话，在引入video.js之前，还需要引入js的 polyfill (垫片)。video.js官方已经帮我们整理好了需要引入的垫片有哪些。
我们开发时，只需要引入以下链接即可。
google分析
大约1%的cdn里包含了一个精简版的google分析，用来获取用户的浏览器和操作系统等信息。如果不想使用google分析，请在引入cdn之前，设置全局变量 HELP_IMPROVE_VIDEOJS 为false。
tip：v7版本不会发送任何数据的，v6.8及以上版本会根据 HELP_IMPROVE_VIDEOJS 的值，决定是否发送数据。
window.HELP_IMPROVE_VIDEOJS = false;