数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 video.js 播放器中初始静音视频？
在本教程中，我们将学习如何在 video.js 播放器中初始静音视频。
在本教程中，我们不会使用像“muted”这样的标准 HTML 标签（这些标签可用于视频元素），而是将使用 video.js 特定的方法。因此，让我们继续本教程的后续部分，了解如何仅使用 video.js 在视频播放器中初始静音视频。
为了静音 video.js 播放器的视频，我们将使用 video.js 提供的“muted”方法和“volume”方法。我们可以使用此方法通过多种过程来静音我们的视频播放器。我们将主要关注以下内容：
在“data-setup”属性中更改“muted”方法
使用 Video.js 动态静音我们的视频播放器。
使用“volume”方法静音我们的视频
让我们深入了解每种方法：
在“data-setup”属性中更改“muted”方法
“muted”方法接受布尔值作为参数，顾名思义，它可以静音或取消静音视频播放器的音量。
为了默认初始静音视频播放器，我们必须在“data-setup”属性中将“muted”方法的值设置为 true。请考虑以下代码片段以实现相同的效果。
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
preload="true"
fluid="true"
width=580
height=350
data-setup='{ "muted": true }'
>
<source
src="https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
上面的代码片段为我们的 <video> 元素将“data-setup”属性中的“muted”选项设置为 true：
注意：由于 data-setup 属性接受 JSON 对象，请确保您在 data-setup 属性中传递有效的 JSON 字符串，否则代码将无法正常执行。
示例 1
使用 video.js 初始静音视频播放器的完整示例如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Mute Video by Default</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
preload="true"
fluid="true"
width=580
height=350
data-setup='{ "muted": true }'
>
<source
src="https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
let player = videojs('my-video-player');
</script>
</body>
</html>
在上面的代码中，我们实现了以下内容：
首先，我们在 HTML 代码的 <head> 部分中使用了免费的 CDN URL 来导入 video.js 的必需 CSS 和 JS 文件。
接下来，我们在 <body> 部分内为我们的视频播放器创建了一个 <video> 元素，它具有各种类，例如“video.js vjs-default-skin vjs-big-play-centered”和“my-video-player”作为视频“id”。
我们还对 <video> 元素使用了一些标准的 HTML 视频选项，如 controls 和 poster，并且 fluid 属性用于使视频播放器响应式。请注意，我们没有使用标准的 HTML“muted”属性。
相反，我们使用 video.js 在 <video> 标签的“data-setup”属性中将“muted”属性设置为 true。
当我们在 Web 浏览器中执行上述示例时，将创建一个视频播放器，该播放器最初将处于静音状态。
现在我们已经了解了如何使用 video.js 在初始化时静音视频，让我们学习如何使用 JavaScript 动态实现相同的功能。
使用 Video.js 动态静音我们的视频播放器
在本教程的这一部分中，我们将了解如何使用 JavaScript 为使用 video.js 创建的视频播放器动态静音视频播放器。
为了初始静音视频，我们需要在 JavaScript 中创建一个 JSON 对象，该对象将“muted”键作为 false（布尔值），然后在初始化视频播放器时将其传递给我们的视频播放器引用。
请考虑以下代码片段，以使用 JavaScript 动态静音视频播放器。
<script>
// Muting Video Player using video options
let videoOptions = { "muted": true };
// Video Player Initialization
let player = videojs('my-video-player', videoOptions);
</script>
在上面的代码片段中，我们通过将“muted”属性设置为 true 来静音 video.js 播放器中的视频，然后将其传递给我们的视频播放器引用的初始化，该引用具有“my-video-player”作为 id。
示例 2
在完整示例中使用上述代码片段将如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Mute Video by Default</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
preload="true"
fluid="true"
width=580
height=350
data-setup='{ "muted": true }'
>
<source
src="https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Muting Video Player using video options
let videoOptions = { "muted": true };
// Video Player Initialization
let player = videojs('my-video-player', videoOptions);
</script>
</body>
</html>
执行上述示例将在我们的 Web 浏览器中创建一个视频播放器，并且视频将默认处于静音状态，就像前面的示例一样。
因此，这是在 video.js 播放器中初始静音视频的第二种方法。现在让我们继续下一节，在下一节中我们将学习如何使用 volume 方法来静音视频。
使用“volume”方法静音我们的视频
在本节中，我们将使用视频播放器引用可用的“volume”方法。“volume”方法将数值作为输入参数。此值是最初在视频播放器上设置的音量百分比。
我们将为视频播放器引用将音量百分比值设置为 0。请考虑以下代码片段以实现相同的效果：
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Setting the volume of video player
player.volume(0);
</script>
在上面的代码中，我们初始化了视频播放器，然后将初始音量设置为 0，因此我们的视频播放器将默认处于静音状态。
示例 3
在完整示例中添加上述代码片段将如下所示：
<!DOCTYPE html>
<html>
<head>
<title>Video.JS Mute Video by Default</title>
<!-- Importing Video.js CSS / JS using CDN URL -->
<link href="https://vjs.zencdn.net/7.19.2/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</head>
<body>
<video
id="my-video-player"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
autoplay="true"
preload="true"
fluid="true"
width=580
height=350
>
<source
src="https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// Video Player Initialization
let player = videojs('my-video-player');
// Setting the volume of video player
player.volume(0);
</script>
</body>
</html>
在上面的完整示例中，我们使用 volume 方法将默认音量设置为“0”。如果我们将此值设置为 50，则我们的视频播放器最初将以 50% 的音量开始。
执行此示例将在 Web 浏览器中创建一个视频播放器，该播放器将默认处于静音状态。
因此，这些是使用 video.js 静音视频播放器的三种方法，我们可以根据我们的用例使用上述任何一种方法。
结论
在本教程中，我们了解了如何在不使用标准 HTML“muted”属性的情况下初始静音 video.js 播放器中的视频。我们查看了使用 video.js 实现相同目标的三种方法，例如使用“volume”和“muted”video.js 选项引用。我们还为每种方法提供了一个完全有效的示例。
1K+ 次观看
