• 快速上手
• 安装
• 配置
• 钩子函数
• 方法
• 监听器

初始化播放器的时候，video标签的data-setup属性和videojs函数的第二个参数，都可以传一个对象, 用来初始化播放器的一些配置信息。

<video poster="http://vjs.zencdn.net/v/oceans.png" data-setup="{}" >
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
</video>

var options = {};
var player = videojs('my-player', options, function onPlayerReady() {});

video.js的可用的配置项如下：

autoplay

Type: boolean|string

<video autoplay>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
</video>

有3点需要注意：

1.浏览器对autoplay的支持情况不同，即使配置了autoplay，也不一定能生效。
2.如果在video标签上配置了autoplay属性，则会忽略从options中传入的autoplay值
3.如果要传字符串类型的值，则不能够通过video标签属性传，只能通过options传。

可取值：

• 布尔类型 false ，等同于 video 标签上没有 autoplay 属性。表示不用自动播放
• 布尔类型 true ，等同于在video标签上添加了autoplay 属性，表示需要自动播放
• 字符串类型 ‘muted’, 将会把播放器设置成静音，然后调用play() 实现自动播放
• 字符串类型 ‘play’, 将会调用play()实现自动播放。
• 字符串类型 ‘any’, 将会调用play实现自动播放，如果不能播放，则会把播放器设置成静音状态，再调用play()

代码如下：

<template>
  <div class="example example1">
    <video
      id="my-player"
      class="video-js"
      controls
      preload="auto"
      poster="//vjs.zencdn.net/v/oceans.png"
    >
      <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,autoplay:'muted'}
    videojs('my-player', options, function() {

      videojs.log('播放器准备好了!');
      // 最新的浏览器一般禁止video自动播放，直接调用play()会报错。只有用户在页面上操作后或者在video标签上添加muted（静音）属性，才能调用play函数。
      // this.play();
    });
  }
}
</script>

个人亲测，如果是使用npm包引入video.js，设置autoplay为’muted’或者’any’可以实现自动播放。如果是cdn引入的video.js,那么无论设置autoplay为什么值都不能实现自动播放。暂时也不知道原因。有知道的人可以联系我。

controls

Type: boolean

控制条，默认是true，设置为false后，将隐藏控制条。

height

Type: string|number

播放器的高度，单位为px

loop

Type: boolean

循环播放

muted

Type: boolean

静音

poster

Type: string

封面，值为图片的url链接

preload

Type: string

提前下载，用于告诉浏览器，当video标签加载后，是否需要立即下载视频资源。

可以设置的值如下：

• ‘auto’ 立即下载视频资源（如果浏览器支持的话），有些手机浏览器节省带宽，会禁止提前下载。
• ‘metadata’ 只下载视频的 meta 数据，meta 数据包含视频的时长和大小，有时候是通过下载几帧视频数据来得到meta的相关信息。
• ‘none’ 不用提前下载任何数据，只有用户点击播放后才开始下载数据

src

Type: string

视频的url链接

width

Type: string|number

播放器的宽度，单位为px

aspectRatio

Type: string

宽高比，设置aspectRatio后，播放器大小将不再是固定的值，播放器大小会根据aspectRatio的值动态计算得到。aspectRatio的值为一个比例，如4:3或者16:9

你也可以通过给video设置特定的class，如vjs-16-9, vjs-9-16, vjs-4-3，vjs-1-1来实现同样的效果。

设置aspectRatio

let options = {width:960,height:400,aspectRatio:'4:3'}
    videojs('my-player', options, function() {
      videojs.log('播放器准备好了!');
    });

个人亲测：设置了aspectRatio后，设置width和height就不起作用了。

autoSetup

Type: boolean

是否允许使用video的data-setup属性启动播放器。

这必须在加载 videojs 时使用 videojs.options.autoSetup = false 全局设置才能生效。

<template>
  <div class="example example1">
    <video
      id="my-player"
      class="video-js"
      controls
      poster="//vjs.zencdn.net/v/oceans.png"
      data-setup="{}"
    >
      <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"
// 设置autoSetup
videojs.options.autoSetup = false

export default {
  name: 'App',
  mounted(){
  }
}
</script>

breakpoints

Type: Object

当与响应式选项一起使用时，通过设置断点，可以决定播放器使用哪个class名称,以便根据播放器的尺寸调整ui样式。
默认的断点如下：

class名	宽度范围
vjs-layout-tiny	0-210
vjs-layout-x-small	211-320
vjs-layout-small	321-425
vjs-layout-medium	426-768
vjs-layout-large	769-1440
vjs-layout-x-large	1441-2560
vjs-layout-huge	2561+

class的名字是不能改变的，可以通过设置断点，来决定使用那个class。通常按如下的方式设置断点：

breakpoints: {
  tiny: 300,
  xsmall: 400,
  small: 500,
  medium: 600,
  large: 700,
  xlarge: 800,
  huge: 900
}

• key是class名去掉vjs-layout-前缀和-后的值
• 值是宽度范围的的最大值
• 并不是所有的key都需要设置值，videojs会把用户设置的跟默认的合并。

children

Type: Array|Object

继承自Component base class

用于设置播放器可以包含的组件类型和顺序。

个人亲测，加上children后，播放器就没有办法正常播放了

fluid

Type: boolean

设置为true，播放器的的大小将不再是一个固定的值，它会根据宽高比（aspectRatio）动态计算出来，以适应其容器的大小。

如果video标签有vjs-fluid属性，那么fluid会自动被设置成true。

<template>
  <div class="example example1">
    <video
      id="my-player"
      class="video-js"
      poster="//vjs.zencdn.net/v/oceans.png"
    >
      <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,
      autoplay:'any',
      fluid:true
    }
    videojs('my-player',options,function(){
      console.log('播放器准备就绪')
    })
  }
}
</script>

inactivityTimeout

Type: number

当播放器处于活动状态时，播放器上会存在一个值为vjs-user-active的class。如果用户长时间对播放器无操作的话，播放器将进入非活动状态，播放器会删除vjs-user-active，添加一个值为vjs-user-inactive的class。

inactivityTimeout就是用来定义多少毫秒用户不操作，播放器将进入非活动状态。如果设置值为0，表示播放器永远不会进入非活动状态。

可以通过监听useractive来判断播放器是否进入活动状态。

language

Type: string, 默认: 浏览器语言 or ‘en’

用来设置初始化播放器时，使用的语言。播放器可以使用那些语言可以在dist/lang文件夹查看

设置成中文

<template>
  <div class="example">
    <video
      id="my-player"
      class="video-js"
      poster="//vjs.zencdn.net/v/oceans.png"
      controls
    >
      <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"
import lang_zhcn from "video.js/dist/lang/zh-CN.json"

videojs.addLanguage('zh-CN', lang_zhcn);

export default {
  name: 'App',
  mounted(){
    let options = {
      width:960,
      height:400,
      language:'zh-CN'
    }
    
    videojs('my-player',options,function(){
      console.log('播放器准备就绪')
      this.on('useractive',function(){
        console.log('useractive')
      })
    })
  }
}
</script>

想要了解更多的话，请查看(languages in Video.js)[https://docs.videojs.com/tutorial-languages.html]

languages

Type: Object

定义哪些语言可以在播放器中使用，Object的key为(language code)[https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry]，值为一个对象（对象的key为英语，值为翻译）。

<template>
  <div class="example">
    <video
      id="my-player"
      class="video-js"
      poster="//vjs.zencdn.net/v/oceans.png"
      controls
    >
      <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"
import lang_zhcn from "video.js/dist/lang/zh-CN.json"
import lang_zhtw from "video.js/dist/lang/zh-TW.json"
export default {
  name: 'App',
  mounted(){
    let options = {
      width:960,
      height:400,
      languages:{
        'zh-CN':lang_zhcn,
        'zh-TW':lang_zhtw
      },
      language:'zh-TW',
    }
    videojs('my-player',options,function(){
      
    })
  }
}
</script>

通常我们不会在options中使用languages属性，而是使用videojs.addLanguage()这个函数。

想要了解更多的话，请查看(languages in Video.js)[https://docs.videojs.com/tutorial-languages.html]

liveui

Type: boolean Default: false

允许播放器使用新的直播ui界面。该界面包括：

• 进度条，用户切换视频进度
• 一个按钮，可以让你跳转到最新的直播进度，还有一个圆圈，用来显示你是否是最新的直播。

没有这个选项的话，进度条将会被隐藏，取而代之的是一个LIVE播放按钮。没有控制条，你就无法跳转到最新的直播。在未来的版本中 liveui 将会被设置成true。

liveTracker.trackingThreshold

Type: number Default: 20

播放器的 liveTracker 组件的一个选项，用于控制什么时候显示liveui。默认情况下如果一个视频小于20s，即使我们设置了liveui选项，liveui也不会显示。

liveTracker.liveTolerance

Type: number Default: 15

播放器的 liveTracker 组件的一个选项,用于判定距离边缘多远可以被当做实时播放。默认情况下，距离边缘15s以内，就会被认为是实时播放，否则就是非实时播发。

nativeControlsForTouch

Type: boolean

Explicitly set a default value for the associated tech option.

normalizeAutoplay

Type: boolean

是否将autoplay: true和**

notSupportedMessage

Type: string

覆盖当 Video.js 无法播放媒体源时显示的默认消息

亲测这个选项，配置了也不起作用

noUITitleAttributes

Type: boolean Default: false

控制UI元素是否可以有title属性。当鼠标移动到元素上的时候，会显示title属性。把noUITitleAttributes设置成true，就会禁止在UI元素上添加title属性，可以通过插件或者框架可以在控制条上添加更多有用的提示。

fullscreen

Type: Object Default: {options: {navigationUI: ‘hide’}

fullscreen.options 可以设置特殊的全屏选项，在某些时候，它将增加元素和处理程序来获得更多功能。

options

Type: Object Default: {navigationUI: ‘hide’}

想了解更多信息，请查看(The Fullscreen API Spec)[https://fullscreen.spec.whatwg.org/#dictdef-fullscreenoptions]

playbackRates

Type: Array

播放速度

由大于0的数字所组成的数组，1是正常播放，0.5是0.5倍播放，2是2倍播放，以此类推。video.js会在控制条上显示该选项，以供用户选择。按照从小到大的顺序，自底到顶显示。

videojs('my-player', {
  playbackRates: [0.5, 1, 1.5, 2]
});

plugins

Type: Object

插件，这个支持初始化播放器的时候，使用自定义选项自动初始化插件，而不需要你手动去初始化它们。

videojs('my-player', {
  plugins: {
    foo: {bar: true},
    boo: {baz: false}
  }
});

这个等价于

var player = videojs('my-player');

player.foo({bar: true});
player.boo({baz: false});

因为 plugins 是一个对象，所以初始的顺序是不确定的。

查看the plugins guide 可以获取更多插件相关的信息

preferFullWindow

Type: boolean, Defaut: false

将这个选项设置为true时，将更改不支持 HTML5 全屏 API 但支持video元素全屏的设备（即 iPhone）上的全屏行为。 播放器将被拉伸以填充浏览器窗口。

responsive

Type: boolean, Default: false

设置这个选项为true的时候，播放器将根据之前设置的响应式断点（breakpoints），自动调整自己的尺寸。

如果设置为false，之前设置的响应式断点（breakpoints）就会被忽略。

sources

Type: Array

视频来源，由对象组成的数组，相当于video 元素拥有多个 scource 元素。对象应该拥有src和type两个属性。

videojs('my-player', {
  sources: [{
    src: '//path/to/video.mp4',
    type: 'video/mp4'
  }, {
    src: '//path/to/video.webm',
    type: 'video/webm'
  }]
});

suppressNotSupportedError

Type: boolean

如果设置为 true，则不会立即触发视频源不兼容的错误，而是会在第一次用户交互时发生。 这对于 Google 的“移动友好”测试工具很有用，该工具无法播放视频，设置为true，就可以不显示错误。

techCanOverridePoster

Type: boolean

Gives the possibility to techs to override the player’s poster and integrate into the player’s poster life-cycle. This can be useful when multiple techs are used and each has to set their own poster any time a new source is played.

个人理解：video.js 可以使用多种播放技术，比如html、falsh、youtube等。设置techCanOverridePoster为true时，每个技术，都自定义预览图。

techOrder

Type: Array, Default: [‘html5’]

定义使用什么播放技术，默认是html5

userActions

Type: Object

用户操作相关设置

userActions.click

Type: boolean|function

定义点击播放器时的动作，默认点击播放器，会切换播放器的播放和暂停状态。如果设置为false，点击播放器时，就不能够切换状态了。

videojs('my-player', {
  userActions: {
    click: false
  }
});

userActions.doubleClick

Type: boolean|function

定义双击播放器时执行的操作，如果设置为flase，双击将没有反应。如果不设置或者设置为true。双击时播放器，将全屏。如果想覆盖默认行文，可以给doubleClick传一个函数。

function myDoubleClickHandler(event) = {
  // `this` is the player in this context

  this.pause();
};

videojs('my-player', {
  userActions: {
    doubleClick: myDoubleClickHandler
  }
});

userActions.hotkeys

Type: boolean|function|object

定义播放器快捷键操作。如果设置为false，那么按快捷键，播放器就没有反应。如果想覆盖播放器，默认快捷键行为，可以按下面的格式覆盖。

var player = videojs('my-player', {
  userActions: {
    hotkeys: function(event) {
      // `this` is the player in this context

      // `x` key = pause
      if (event.which === 88) {
        this.pause();
      }
      // `y` key = play
      if (event.which === 89) {
        this.play();
      }
    }
  }
});

默认快捷键行为如下：

• ‘x’ 全屏，只有当控制条存在全屏控件的时候才有效
• ‘m’ 静音，不管有没有控制条都有效
• ‘k’ 播放/暂停 ,不管有没有控制条都有效
• ‘space’ 播放/暂停 ,不管有没有控制条都有效

快捷键要求播放器首先要获取焦点，space 快捷键必须得在控制条获取焦点时才起作用，其他快捷键就不要求必须控制条获取焦点。

userActions.hotkeys.fullscreenKey

Type: function

覆盖全屏快捷键行为，如果设置的话，会将键盘事件传给该函数，如果函数返回true，就可以切换全屏。

var player = videojs('my-player', {
  userActions: {
    hotkeys: {
      muteKey: function(event) {
        // disable mute key
      },
      fullscreenKey: function(event) {
        // override fullscreen to trigger when pressing the v key
        return (event.which === 86);
      }
    }
  }
});

userActions.hotkeys.muteKey

Type: function

覆盖静音快捷键行为，如果设置的话，会把键盘事件传给函数。函数返回true，就可以切换播放器静音效果。

userActions.hotkeys.playPauseKey

Type: function

覆盖播放/暂定快捷键行为，如果设置的话，会把键盘事件传给函数。函数返回true，就可以切换播放器的播放和暂停。

vtt.js

Type: string

覆盖vtt.js的默认url。这个将会异步加载，以支持WebVTT

此选项将用于 Video.js 的“novtt”构建（即 video.novtt.js）。 这样就不用把，vtt.js与Video.js 捆绑在一起了。

1. autoplay
2. controls
3. height
4. loop
5. muted
6. poster
7. preload
8. src
9. width
10. aspectRatio
11. autoSetup
12. breakpoints
13. children
14. fluid
15. inactivityTimeout
16. language
17. languages
18. liveui
19. liveTracker.trackingThreshold
20. liveTracker.liveTolerance
21. nativeControlsForTouch
22. normalizeAutoplay
23. notSupportedMessage
24. noUITitleAttributes
25. fullscreen
26. playbackRates
27. plugins
28. preferFullWindow
29. responsive
30. sources
31. suppressNotSupportedError
32. techCanOverridePoster
33. techOrder
34. userActions
35. userActions.click
36. userActions.doubleClick
37. userActions.hotkeys
38. userActions.hotkeys.fullscreenKey
39. userActions.hotkeys.muteKey
40. userActions.hotkeys.playPauseKey
41. vtt.js