Video.js 视频播放插件使用实例

发布于 2019-01-02

#### 插件介绍

Video.js是一个通用的在网页上嵌入视频播放器的javascript库，Video.js会自动检测浏览器对html5的支持情况，如果不支持html5则自动使用Flash播放器。（要支持ie低版本请下载5.4.3版）

官网地址：https://videojs.com

#### 插件安装

#### Video.js CDN

```
<head>
  <link href="https://vjs.zencdn.net/7.4.1/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 video</a>
    </p>
  </video>

#### npm 安装

```
$ npm install video.js
```

#### 文件目录

Video.js/
├── alt
│   ├── video.core.js
│   ├── video.core.min.js
│   ├── video.core.novtt.js
│   ├── video.core.novtt.min.js
│   ├── video.novtt.js
│   └── video.novtt.min.js
├── examples/
├── font
│   ├── VideoJS.svg
│   ├── VideoJS.ttf
│   └── VideoJS.woff
├── lang/
├── video-js-7.4.1.zip
├── video-js.css
├── video-js.min.css
├── video.cjs.js
├── Video.es.js
├── Video.js
└── video.min.js

#### 使用方法

##### 引用video-js.cs样式文件和video.js
```
<link href="https://vjs.zencdn.net/7.4.1/video-js.css" rel="stylesheet">

支持mp4、webm、ogv三种视频格式，根据所需要格式选择。可利用`poster="exp.png"`设置播放初始图。

```
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="http://video-js.zencoder.com/oceans-clip.png"
      data-setup="{}">
    <source src="http://视频地址格式1.mp4" type='video/mp4' />
    <source src="http://视频地址格式2.webm" type='video/webm' />
    <source src="http://视频地址格式3.ogv" type='video/ogg' />
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
</video>
```
在上面代码之后，追加下面代码可以自动播放。
```
<script type="text/javascript">
    var myPlayer = videojs('example_video_1');
    videojs("example_video_1").ready(function(){
        var myPlayer = this;
        myPlayer.play();
    });
</script>
```

默认情况下，大的播放按钮是被定为在左上角的，这样就不会覆盖视频内容。如果你想让这个播放按钮居中，你可以给你的`video`标签添加额外的`vjs-big-play-centered`样式，比如：
```
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
  ...
</video>
```
##### 为动态加载的 html 元素设置 Video.js

如果你的 web 页面或者应用是动态加载 video 标签的（ajax，appendChild，等等）,这样在页面加载后这个元素是不存在的，那么你会想要手动设置播放器而不是依靠`data-setup`属性。

要做到这一点，首先将`data-setup`属性从`video`标签中移除掉，这样在播放器初始化的时候就不会混乱了。然后运行下面javascript代码，有时在 Video.js加载后，有时是在video标签被加载进DOM后
```
videojs("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});
```
videojs方法中的第一个参数是你的video标签的ID，用你自己的代替。

参数2为一个选项对象。它允许你像设置`data-setup`属性一样设置额外的选项。

参数3为'ready'回调，如果Video.js初始化完成后，则触发这个回调。

也可以传入一个元素本身的引用来代替元素ID：
```
videojs(document.getElementById('example_video_1'), {}, function() {
  // This is functionally the same as the previous example.
});
videojs(document.getElementsByClassName('awesome_video_class')[0], {}, function() {
  // You can grab an element by class if you'd like, just make sure
  // if it's an array that you pick one (here we chose the first).
});
```