video.js 控制声音

Video.js 是一个流行的开源 HTML5 视频播放器，它提供了一个统一的 API 来控制视频播放，并且支持多种格式的视频文件。控制声音通常涉及到调整音量、静音以及获取当前音量状态等功能。

基础概念

音量控制：允许用户增加或减少视频播放的音量。
静音：一键将视频声音关闭或开启。

类型

滑块式音量控制：用户可以通过拖动滑块来调整音量大小。
按钮式静音控制：用户可以点击按钮来快速静音或取消静音。

应用场景

在线视频平台：如 YouTube、Bilibili 等，用户可以在观看视频时调整音量。
教育网站：在线课程或讲座中，教师或讲师可能需要调整音量以确保所有学生都能听清楚。
企业培训：在企业内部培训视频中，音量控制可以帮助员工更好地集中注意力。

如何使用 Video.js 控制声音

Video.js 提供了内置的方法来控制音量。以下是一些基本的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video.js Sound Control Example</title>
<link href="https://vjs.zencdn.net/7.14.3/video-js.css" rel="stylesheet" />
</head>
<body>

<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
  data-setup='{}'>
  <source src="YOUR_VIDEO_SOURCE.mp4" type="video/mp4" />
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a web browser that
    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
  </p>
</video>

<script src="https://vjs.zencdn.net/7.14.3/video.min.js"></script>
<script>
  var player = videojs('my-video');

  // 设置音量为 50%
  player.volume(0.5);

  // 静音
  player.muted(true);

  // 取消静音
  player.muted(false);

  // 获取当前音量
  var currentVolume = player.volume();
  console.log('Current volume is: ' + currentVolume);
</script>

</body>
</html>