video js选项

设置选项 
video.js嵌入代码是一个简单的HTML5视频标签，因此你可以使用标准的标签属性设置选项选项。

<video controls autoplay preload="auto" ...>

• 1

或者，你可以使用数据设置属性提供JSON格式选项。这也是您将如何设置不标准的视频标签的选项。

<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>

• 1

最后，如果你不使用数据设置属性触发玩家的设置，你可以通过与玩家选择一个对象在JavaScript函数的第二个参数设置。

videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });

• 1

个体选项

关于视频标签属性的说明

随着HTML5视频标签的属性，只能是true或false（布尔），你只要包含属性（不等号）打开，或排除它，关掉它。例如，要打开控制：

错误

<video controls="true" ...>

• 1

正确

<video controls ...>

• 1

最大的问题，人们遇到的最大问题是试图将这些值设置为假，假为值（例如，控制=“假”），实际上是相反的，并设置值为真，因为该属性仍然包括。如果你需要的属性包括XHTML验证一个等号，你可以设置该属性的值为其名字一样（例如controls=”controls”）。

controls

控件选项设置是否该播放器是否具有用户可以与之交互的控件。没有控制启动视频播放的唯一方式是使用自动属性或通过API。

<video controls ...>
or
{ "controls": true }

• 1
• 2
• 3

autoplay

如果播放的是真实的，视频播放等页面加载（没有任何用户的互动）。苹果的iOS设备不支持。苹果块的自动播放功能，为了保护来自不情愿地使用他们的很多客户（通常是昂贵的）月度数据计划。在这种情况下，需要一个用户触摸/点击来启动视频。

<video autoplay ...>
or
{ "autoplay": true }

• 1
• 2
• 3

preload

预加载属性通知浏览器是否应该在加载视频标记时开始下载。选项是自动的，元数据的，没有。 
‘auto’:立即开始加载视频（如果浏览器同意）。一些移动设备如iPhone和iPad将不会加载视频为了保护用户的带宽。这就是为什么这个值被称为’自动’，而不是更像’真正的’。 
‘metadata’:只加载视频的元数据，其中包括视频的时间和尺寸等信息。 
‘none’:不要预加载任何视频数据。这将等待用户点击播放开始下载。

<video preload ...>
or
{ "preload": "auto" }

• 1
• 2
• 3

poster

海报属性设置在视频开始播放之前显示的图像。这通常是一个视频帧或自定义标题屏幕。只要用户点击播放的图像就会消失。

<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }

• 1
• 2
• 3

loop

循环属性使视频在结束时开始很快结束。这可能是一个视觉效果，如云的背景。

<video loop ...>
or
{ "loop": "true" }

• 1
• 2
• 3

width

宽度属性设置视频的显示宽度。

<video width="640" ...>
or
{ "width": 640 }

• 1
• 2
• 3

height

高度属性设置视频的显示高度。

<video height="480" ...>
or
{ "height": 480 }

• 1
• 2
• 3

组件选项

您可以为任何单个播放器组件设置选项。例如，如果您要删除mutetoggle按钮，这是一个孩子的ControlBar，你可以设置该组件的错误：

var player = videojs('video-id', {
  children: {
    controlBar: {
      children: {
        muteToggle: false
      }
    }
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

所有的孩子都开始变得有点啰嗦，那么简单的东西，你也可以设置为子组件的直接父选项。这与上面的功能相同，例如。

var player = videojs('video-id', {
  controlBar: {
    muteToggle: false
  }
});

• 1
• 2
• 3
• 4
• 5

这也可以用数据设置属性的视频元素，只记得选项，需要使用适当的JSON符号。

<video ... data-setup='{ "children": { "controlBar": { "children": { "muteToggle": false } } } }'></video>

• 1

组件指南有一个优秀的玩家结构，你只需要记住一个孩子的每一个级别的儿童组件。