数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
服装设计
法学Video.js 播放器方法/选项参考
在本教程中，我们将学习 Video.js 的一些基本选项参考。选项参考就像设置一样，用于控制或修改视频播放器的行为。
这些选项既可以是 HTML5 选项（如自动播放、重新加载等），也可以是 Video.js 特定的设置。我们将逐一查看这些选项。
标准 HTML5 <video> 元素选项
标准 HTML5 <video> 元素选项是标准设置，适用于 <video> 标签和 <video-js> 标签。借助这些选项，您可以更改视频播放器的高度、宽度、控件等。
让我们讨论一些最常见的标准 HTML5 视频选项：
自动播放 (Autoplay)
用法 - 属性 - 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://tutorialspoint.com/videos/myVideo.mp4"> </video> <video-js autoplay muted src="https://tutorialspoint.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)
用法 - "controls" 属性允许您在视频播放器上添加按钮或控件，例如播放和暂停。如果没有 controls 属性，则只能使用 autoplay 属性播放视频。
类型 - 布尔值
<video controls src="https://tutorialspoint.com/videos/myVideo.mp4"></video>
<video-js controls src="https://tutorialspoint.com/videos/myVideo.mp4" data-setup='{}'></video-js>
在上例代码中，controls 属性已添加到 <video> 和 <video-js> 标签。
高度和宽度 (Height and Width)
用法 - 正如名称所示，height 和 width 标签分别允许您更改视频播放器的高度和宽度。
类型 - 字符串或数字
<video controls width="320" height="240" src="myVideo.mp4"></video>
<video-js controls 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-js aspectRatio="21:9" audioOnlyMode="true" src="myVideo.mp4" datasetup='{}'></video-js>
在上例代码中，audioOnlyMode 属性已设置为 true。这将隐藏视频的所有视频播放器组件。
流畅 (Fluid)
用法 - 要使视频播放器流畅，此选项应设置为 true。它将缩放视频播放器大小以适应视频的内部纵横比或指定的比率。
类型 - 布尔值
<video-js aspectRatio="21:9" fluid="true" src="myVideo.mp4" datasetup='{}'></video-js>
在上例中，视频播放器大小将缩放以适应给定的纵横比，即 21:9。如果没有提供纵横比，则 fluid 属性将设置为视频的固有比率。
播放速率 (playbackRates)
用法 - playbackRates 允许您显示控件，让用户控制视频的播放速度。播放速率的值必须是一个严格大于 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://tutorialspoint.com/videos/video1.mp4/sample720.mp4" > </video-js> <script src="https://vjs.zencdn.net/7.19.2/video.min.js"></script> </body> </html>
在此代码片段中，我们已将播放速率添加到 data-setup 中的视频播放器选项。因此，播放速度控制器将显示 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://tutorialspoint.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://tutorialspoint.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> 标签，并允许您进一步控制视频播放器的行为和操作。
931 次浏览
