options(选项)

注意:本文档仅是常用选项的参考。要了解Video.js更多选项的信息,请参阅设置指南


标准<video>元素选项

这些选项都可以作为标准<video>元素属性使用;因此,可以按照设置指南中概述的三种方式定义它们。通常,默认值未列出,因为这留给了浏览器供应商。

autoplay

类型:boolean|string 注意:目前,自动播放属性和选项不能保证您的视频将自动播放。注意2:如果媒体元素上有一个属性,则该选项将被忽略。注意3:您不能在属性中传递字符串值,必须在videojs选项中传递它

您应该向videojs函数传递一个自动播放选项,而不是使用自动播放属性。以下值是有效的:

  • 布尔值false:和video元素没有设置属性一样,不会自动播放;
  • 布尔值true:和video元素上的属性相同,将会自动播放;
  • 字符串"muted":将静音视频元素,然后在loadstart上手动调用play()。这可能会有用;
  • 字符串"play":会在loadstart上调用play(),类似于浏览器的自动播放;
  • 字符串"any":将在loadstart上调用play(),如果请求被拒绝,它将video元素静音,然后调用play()。

示例:

var player = videojs('my-video', {
  autoplay: 'muted'
});
// or
player.autoplay('muted');

controls

类型: boolean

确定播放器是否有可以和用户交互的控件。如果没有,则开始播放视频的唯一方法是使用autoplay属性或通过播放器API。

height

类型: string|number

设置视频播放器的显示高度(以像素为单位)。

loop

类型: boolean

视频循环

muted

类型: boolean

默认情况下将使视频静音。

poster

类型: string

在视频开始播放之前显示的图像的URL。这通常是视频的帧或自定义标题屏幕。用户点击“播放”后,图像就会消失。

preload

类型: string

在加载<video>元素后,建议浏览器是否应该开始下载视频数据。支持的值是:

'auto'

立即开始加载视频(如果浏览器支持的话)。某些移动设备不会预加载视频以保护其用户的带宽/数据使用情况。这就是为什么将该值称为“ auto”而不是诸如的结论性原因的原因'true'。

这往往是最常见和推荐的值,因为它允许浏览器选择最佳行为。

'metadata'

仅加载视频的元数据,其中包括诸如视频的持续时间和尺寸之类的信息。有时,将通过下载几帧视频来加载元数据。

'none'

不要预加载任何数据。浏览器将等待,直到用户单击“播放”开始下载。

src

类型: string

嵌入视频源的源URL。

width

类型: string|number

设置视频播放器的显示宽度(以像素为单位)。


Video.js 选项

每个选项默认都是undefined的,除非另有指定。

aspectRatio

类型: string

将播放器置于流体模式,并在计算播放器的动态大小时使用该值。这个值应该代表一个比率——两个用冒号隔开的数字(例如"16:9"或"4:3")。

autoSetup

类型: boolean

阻止播放器为具有data-setup属性的媒体元素运行自动设置。

注意:必须在加载videojs的时候全局设置videojs.options.autoSetup = false才能生效。

breakpoints

类型: Object

与responsive option一起使用时,设置断点,用于配置如何在播放器上切换类名,以根据播放器的尺寸调整UI。

默认情况下,断点为:

类名 宽度范围
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+

虽然不能更改类名称,但是可以通过如下对象来配置宽度范围:

breakpoints: {
  tiny: 300,
  xsmall: 400,
  small: 500,
  medium: 600,
  large: 700,
  xlarge: 800,
  huge: 900
}
  • 通过删除vjs-layout-前缀和任何-字符,breakpoints对象的键从关联的类名派生。
  • 该值的breakpoints对象定义的范围内的最大宽度。
  • 并非所有键都需要定义。您可以通过传递一个带有一个键/值对的对象来轻松覆盖单个断点!创建播放器时,自定义断点将与默认断点合并。

children

类型: Array|Object

此选项从Component基类继承。

fluid

类型: boolean

如果为true,则Video.js播放器将具有可变大小。换句话说,它将缩放以适合其容器。

另外,如果<video>元素具有"vjs-fluid",则此选项自动设置为true。

inactivityTimeout

类型: number

Video.js通过"vjs-user-active"和"vjs-user-inactive"类以及"useractive"事件让用户和播放器进行交互。

inactivityTimeout确定在声明用户不活动之前需要多少毫秒的非活动状态。0表示不存在InactiveTimeout,用户永远不会被视为不活动。

language

类型:string,默认:浏览器默认或'en'

设置播放器的可用语言,随时可以更改。了解更多语言信息

languages

类型: Object

定制播放器中可用的语言。该对象的键将是语言代码,值将是带有英语键和已转换值的对象。了解更多语言信息

注意:通常不需要此选项,最好将您的自定义语言传递给videojs.addLanguage(),这样所有播放器都可以使用它们。

liveui

类型:boolean 默认值:false

允许播放器使用新的实时用户界面,其中包括:

  • 在实时窗口中搜索的进度条
  • 可以单击该按钮以找到带有圆形圆圈的活动边缘,该圆圈指示您是否处于活动边缘。
如果没有此选项,则进度条将被隐藏,而在其位置处将显示表示LIVE播放的文本。没有进度控制,并且您将无法单击文本来寻找实时边缘。在将来的版本liveui中将默认为true!

nativeControlsForTouch

类型: boolean

显式地为相关的技术选项设置默认值。

notSupportedMessage

类型: string

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

fullscreen

类型:Object 默认值:{options: {navigationUI: 'hide'}

fullscreen.options可以设置为传递特定的全屏选项。在某些时候,它将增加功能element并handler提供更多功能。

options

类型:Object 默认值:{navigationUI: 'hide'}

有关更多详细信息,请参见全屏API规范

playbackRates

类型: Array

严格大于0的数字数组,其中1表示常规速度(100%),0.5表示半速(50%),2表示倍速(200%),依此类推。如果指定,Video.js将显示一个控件(类别vjs-playback-rate)(允许用户从一系列选项中选择播放速度)。选择从下到上以指定顺序显示。

例如:

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

plugins

类型: Object

这支持在播放器初始化时让插件使用自定义选项自动初始化-而不是要求您手动初始化。

videojs('my-player', {
  plugins: {
    foo: {bar: true},
    boo: {baz: false}
  }
});
等同于
var player = videojs('my-player');
player.foo({bar: true});
player.boo({baz: false});

因为插件选项是一个对象,初始化的顺序是不保证的!

有关Video.js插件的更多信息,请参见插件指南

responsive

类型:boolean,默认值:false

将此选项设置为true会导致播放器根据响应的断点进行自定义(请参阅:breakpoints option)。

当此选项为false默认值时,响应断点将被忽略。

sources

类型: Array

反映原始<video>元素具有一系列子<source>元素的功能的对象数组。这应该是具有src和type属性的对象数组。例如:

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

使用<source>元素将具有相同的效果:

<video ...>
  <source src="//path/to/video.mp4" type="video/mp4">
  <source src="//path/to/video.webm" type="video/webm">
</video>

suppressNotSupportedError

类型: boolean

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

techCanOverridePoster

类型: boolean

让技术能够覆盖播放器的海报并将其整合到播放器的海报生命周期中。这在使用多种技术时很有用,而且每次播放新源时,每种技术都必须设置自己的海报。

techOrder

类型:Array,默认值:['html5']

定义首选Video.js技术的顺序。默认情况下,这意味着该Html5技术是首选。其他注册技术将按照其注册顺序添加在该技术之后。

userActions

类型: Object

userActions.doubleClick

类型: boolean|function

控制双击播放器/技术的操作方式。如果设置为false,则禁用双击。如果未定义或设置为 true,则启用双击并切换全屏模式。要覆盖默认的双击处理,请将其设置userActions.doubleClick 为接受dblclick事件的函数:

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

  this.pause();
};

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

userActions.hotkeys

类型: boolean|function|object

控制播放器热键的操作方式。如果设置为false或undefined,则禁用热键。如果设置为true或对象(允许在fullscreenKey下面定义等),则如下所述启用热键。要覆盖默认的热键处理,请将其设置userActions.hotkeys为接受keydown事件的函数:

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();
      }
    }
  }
});

默认热键处理为:

行动 由...启用
f 切换全屏 仅在控制栏中显示“全屏”按钮时启用
m 切换静音 即使没有控制栏也始终启用
k 切换播放/暂停 即使没有控制栏也始终启用
Space 切换播放/暂停 即使没有控制栏也始终启用

热键需要播放器首先关注。请注意,如果该Space键具有键盘焦点,则该键将激活诸如按钮和菜单之类的控件。不管播放器中的哪个控件具有焦点,其他热键均起作用。

userActions.hotkeys.fullscreenKey

类型: function

覆盖全屏键定义。如果设置了此功能,则函数将接收keydown事件;否则,函数将接收事件。如果函数返回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

类型: function

覆盖静音键定义。如果设置了此功能,则函数将接收keydown事件;否则,函数将接收事件。如果函数返回true,则执行静音切换操作。

userActions.hotkeys.playPauseKey

类型: function

覆盖播放/暂停键定义。如果设置了此功能,则函数将接收keydown事件;否则,函数将接收事件。如果函数返回true,则执行播放/暂停切换动作。

vtt.js

类型: string

允许将默认网址覆盖为vtt.js,该网址可以异步加载以支持的polyfill WebVTT。

此选项将在Video.js(即video.novtt.js)的“ novtt”构建中使用。否则,vtt.js与Video.js捆绑在一起。


Component Options

Video.js播放器是一个组件。像所有组件一样,您可以定义其包括哪些子项,它们以什么顺序出现以及将哪些选项传递给它们。

这是一个快速参考;因此,有关Video.js中组件的更多详细信息,请查看组件指南。

children

类型: Array|Object

如果Array-(这是默认值),则用于确定哪个子项(按组件名称)以及在播放器(或其他组件)上的创建顺序:

// The following code creates a player with ONLY bigPlayButton and
// controlBar child components.
videojs('my-player', {
  children: [
    'bigPlayButton',
    'controlBar'
  ]
});
该children选项还可以作为传递Object。在这种情况下,它用于提供options任何/所有孩子,包括使用以下方法禁用他们false:
// This player's ONLY child will be the controlBar. Clearly, this is not the
// ideal method for disabling a grandchild!
videojs('my-player', {
  children: {
    controlBar: {
      fullscreenToggle: false
    }
  }
});

${componentName}

类型: Object

部件可以通过组件名称驼峰命名法的变体(例如controlBar表示controlBar)获得定制选项。这些可以嵌套在孙子辈关系的表示中。例如,禁用全屏控制:

videojs('my-player', {
  controlBar: {
    fullscreenToggle: false
  }
});


Tech Options

${techName}

类型: Object

可以为Video.js播放技术(即“技术”)提供自定义选项,作为传递给videojs函数的选项的一部分。它们应以技术名称的小写字母形式传递(例如"flash"或"html5")。

flash

swf

指定该技术的Video.js SWF文件所在的位置Flash:

videojs('my-player', {
  flash: {
    swf: '//path/to/videojs.swf'
  }
});
但是,更改全局默认值通常更合适:
videojs.options.flash.swf = '//path/to/videojs.swf'

html5

nativeControlsForTouch

类型: boolean

仅技术支持Html5,可以将此选项设置true为强制为触摸设备提供本机控件。

nativeAudioTracks

类型: boolean

可以设置为false禁用本机音轨支持。最常与videojs-contrib-hls一起使用。

nativeTextTracks

类型: boolean

可以设置为false强制模拟文本轨道,而不是本机支持。该nativeCaptions选项也存在,但仅仅是的别名nativeTextTracks。

nativeVideoTracks

类型: boolean

可以设置为false禁用本机视频轨道支持。最常与videojs-contrib-hls一起使用。

preloadTextTracks

类型: boolean

可以设置为false延迟加载非活动文本轨道,直到使用为止。切换字幕时,这可能会导致短暂的延迟,在此期间可能缺少字幕。

默认行为是预加载所有文本轨道。

上一篇:modal-dialog(模态对话框) 下一篇:player-workflows(播放器工作流程)