Video.js 播放器方法/选项引用
在本教程中，我们将介绍 video.js 的一些基本选项引用。选项引用类似于控制或修改视频播放器行为的设置。
这些选项可以是 HTML5 选项，例如自动播放、重新加载等，也可以是 video-js 特有的设置。我们将逐一介绍这些选项。
标准 HTML5 <video> 元素选项
标准 HTML5 <video> 元素选项是标准设置，可与 <video> 标签和 <video-js> 标签配合使用。借助这些选项，您可以更改视频播放器的高度、宽度、控件等。
让我们讨论一些最常见的标准 HTML5 视频选项 -
自动播放
用法- 属性 - 视频将在 HTML 页面加载后立即开始播放。
类型- 布尔值
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video autoplay muted src="https://www.cainiaomax.com/videos/myVideo.mp4"> </video> <video-js autoplay muted src="https://www.cainiaomax.com/videos/myVideo.mp4" data-setup='{}'> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
在上面的代码片段中，您可以看到使用自动播放属性的两种方式:使用 <video> 元素标签和使用 <video-js> 标签。
注意− 请确保视频的 src 是视频文件的路径。
控件
用法− 使用"controls"属性可以在视频播放器上添加按钮或控件，例如播放和暂停。如果没有 control 属性，则只能使用自动播放属性播放视频。
类型− 布尔值
<video control src="https://www.cainiaomax.com/videos/myVideo.mp4"></video>
<video-js 控件 src="https://www.cainiaomax.com/videos/myVideo.mp4" data-setup='{}'></video-js>
在上面的代码中，<video> 和 <video-js> 标签都添加了控件属性。
高度和宽度
用法 − 顾名思义，height 和 width 标签可分别更改视频播放器的高度和宽度。
类型 − 字符串或数字
<video 控件 width="320" height="240" src="myVideo.mp4"></video>
<video-js 控件 width="320" height="240" src="myVideo.mp4" datasetup='{}'></video-js>
如上代码片段所示，我们为两个视频元素添加了 240 像素的高度和 320 像素的宽度。
以上是一些常用的标准 HTML 视频元素选项。在下一节中，我们将了解一些 video-js 的特定设置。
Video.js 元素特定选项
Video.js 特定选项仅适用于 <video-js> 标签，不适用于标准 <video> 标签。除非另行指定，否则这些设置的值默认为 undefined。
让我们看看一些 video.js 元素特有的选项 -
aspectRatio
用法- 此选项使视频播放器更加流畅，aspectRatio 参数的值用于动态计算播放器的大小。aspectRatio 的值应为两个数字组成的比率，并用冒号分隔。例如:"21:9"
类型- 字符串
<video-js aspectRatio="21:9" src="myVideo.mp4" data-setup='{}'></video-js>
在以上摘录中，aspectRatio 设置为 21:9。除此之外，类"vjs-21-9"也可以实现相同的效果。
<video-js class="vjs-21-9" src="myVideo.mp4" data-setup='{}'></video-js>
audioOnlyMode
用法 − 设置为 true 时，除控制栏之外的所有播放器组件以及视频专用的控制栏组件均会隐藏。
类型 − 布尔值 (true/false)
<video-jsaspectRatio="21:9"audioOnlyMode="true"src="myVideo.mp4"datasetup='{}'></video-js>
在上面的代码中，audioOnlyMode 属性已设置为 true。这将隐藏视频的所有播放器组件。
流畅
用法− 要使视频播放器流畅播放，应将此选项设置为 true。它将缩放视频播放器的大小以适应视频的内部宽高比或指定的宽高比。
类型− 布尔值
<video-jsaspectRatio="21:9"fluid="true"src="myVideo.mp4"datasetup='{}'></video-js>
在上面的示例中，视频播放器的大小将缩放以适应指定的宽高比，即 21:9。如果未提供宽高比，fluid 属性将设置为视频的固有比例。
playbackRates
用法− playingRates 允许您显示控件，让用户控制视频的播放速度。播放速率的值必须是一个严格大于 1 的数组。播放值"1"表示常规速度，而"2"表示视频速度的两倍，依此类推。播放速率按从下到上的顺序显示。
类型− 数组
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js controls id="myVideo" data-setup='{"playbackRates": [0.5, 1,1.5, 2, 3]}'> <source src="https://www.cainiaomax.com/videos/video1.mp4/sample720.mp4" > </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
在此代码片段中，我们在数据设置中的视频播放器选项中添加了播放速率。因此，播放速度控制器将显示 0.5、1、1.5、2 和 3 作为播放速率。
userActions
用法− userActions 具有多种函数来更改用户与视频播放器的交互方式。
类型− 对象
userAction.click− 这是一个布尔值或函数类型选项，用于控制用户点击播放器的行为。如果此选项的值设置为 false − 则不允许用户在暂停和播放之间切换。
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js autoplay muted aspectRatio="21:9" fluid="true" id="myVideo"data-setup='{}'> <source src="https://www.cainiaomax.com/videos/sample480.mp4" type="video/mp4"></source> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> videojs("myVideo", {"userActions": {"click": false }});</script> </body> </html>
在上面的代码片段中，使用了 userActions.click，并将其值设置为 ID 为"myVideo"的视频播放器的值。
如果"userActions.click"的值设置为 undefined 或 true，则启用点击和播放/暂停切换。
userAction.doubleClick− doubleClick 也是一个布尔值和函数类型选项，用于控制视频上的双击操作。
如果此选项的值设置为 false，则不允许双击视频。如果其值为 true 或 undefined，则允许双击并切换全屏模式。默认的全屏切换操作也可以通过使用点击处理函数来覆盖。
<!DOCTYPE html> <html> <head> <link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" /> </head> <body> <video-js controls autoplay muted aspectRatio="21:9" fluid="true" id="myVideo" data-setup='{}'> <source src="https://www.cainiaomax.com/videos/sample480.mp4" type="video/mp4"></source> </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"> videojs("myVideo", {"userActions": {"doubleClick": true }}); </script> </body> </html>
在上面的代码中，对于 id 为"myVideo"的视频播放器，"userActions.doubleClick"被设置为 true。这将启用双击视频的功能，并将视频设置为全屏模式。
总结
在本教程中，我们学习了 video.js 库的一些方法引用或选项引用。我们了解了一些标准的 HTML5 选项，这些选项在 <video> 和 <video-js> 中均可使用。之后，我们还了解了一些 video.js 特有的设置，这些设置仅适用于 <video-js> 标签，可让您进一步控制视频播放器的行为和操作。
