HTML VideoJS：保持控件可见

在本文中，我们将介绍如何使用HTML和VideoJS来实现保持控件可见的功能。通常情况下，当用户不进行鼠标悬停或点击时，视频播放器的控件栏会自动隐藏以提供更大的展示区域。然而，有些场景下我们可能希望保持控件始终可见，以便用户随时操作。

阅读更多：HTML 教程

VideoJS简介

VideoJS是一个基于HTML5的开源视频播放器库，它提供了丰富的功能和可定制的选项。VideoJS不仅支持常见的视频格式和协议，还能够自动检测浏览器的兼容性并使用最佳的播放方式。我们可以通过引入VideoJS的依赖文件来使用它。

VideoJS基本用法

首先，我们需要将VideoJS的依赖文件引入到HTML页面中：

<link href="https://vjs.zencdn.net/7.15.4/video-js.min.css" rel="stylesheet">
<script src="https://vjs.zencdn.net/7.15.4/video.js"></script>

然后，在HTML中创建一个video元素，并为其指定一个唯一的ID：

<video id="my-video" class="video-js"></video>

在JavaScript中，我们可以通过该ID获取video元素的实例，并对其进行配置和使用：

var player = videojs('my-video');

保持控件可见的方式

要实现保持控件可见的功能，我们可以使用VideoJS的一些配置选项和插件。下面介绍两种常见的实现方式。

方式一：使用AlwaysVisible控件插件

VideoJS提供了一个名为AlwaysVisibleControlsPlugin的插件，可在不进行鼠标悬停或点击时保持控件可见。我们需要先引入插件的依赖文件：

<script src="https://cdn.rawgit.com/xbgmsharp/videojs-always-visible-controls/v1.0.1/dist/videojs-always-visible-controls.min.js"></script>

然后，在JavaScript中对VideoJS进行配置，并将AlwaysVisibleControlsPlugin插件添加到控件列表中：

var player = videojs('my-video');
player.controls(true);
player.alwaysVisibleControls({
  controls: {
    playToggle: {},
    currentTimeDisplay: {},
    timeDivider: {},
    durationDisplay: {},
    progressControl: {},
    remainingTimeDisplay: {},
    fullscreenToggle: {}
  }
});

方式二：自定义CSS样式

我们也可以使用自定义的CSS样式来实现保持控件可见的效果。通过设置控件栏的CSS属性为可见，我们可以让控件一直显示在视频播放器上面。示例代码如下：

.video-js .vjs-control-bar {
  visibility: visible !important;
  opacity: 1 !important;
  transition: none !important;
}

然后，在JavaScript中对VideoJS进行配置，并禁用控件的隐藏功能：

var player = videojs('my-video');
player.controls(true);
player.on('mouseover', function() {
  player.controlBar.show();
});
player.on('mouseout', function() {
  player.controlBar.hide();
});

上述代码中，我们使用了鼠标事件来控制控件栏的显示和隐藏。当鼠标悬停在视频播放器上时，控件栏会显示；当鼠标离开后，控件栏会隐藏。

示例说明

我们可以创建一个简单的HTML页面来演示保持控件可见的效果。首先，引入VideoJS和AlwaysVisibleControlsPlugin的依赖文件，然后创建一个video元素。接下来，我们可以使用上述的方式一或方式二来实现保持控件可见的效果。最后，调用player.play()方法来开始播放视频。

<!DOCTYPE html>
<html>
<head>
  <link href="https://vjs.zencdn.net/7.15.4/video-js.min.css" rel="stylesheet">
  <script src="https://vjs.zencdn.net/7.15.4/video.js"></script>
  <script src="https://cdn.rawgit.com/xbgmsharp/videojs-always-visible-controls/v1.0.1/dist/videojs-always-visible-controls.min.js"></script>
</head>
<body>
  <video id="my-video" class="video-js">
    <source src="example.mp4" type="video/mp4">
  </video>
  <script>
    var player = videojs('my-video');
    player.controls(true);

    // 使用AlwaysVisibleControlsPlugin插件
    player.alwaysVisibleControls({
      controls: {
        playToggle: {},
        currentTimeDisplay: {},
        timeDivider: {},
        durationDisplay: {},
        progressControl: {},
        remainingTimeDisplay: {},
        fullscreenToggle: {}
      }
    });

    // 或者使用自定义CSS样式
    /*
    player.on('mouseover', function() {
      player.controlBar.show();
    });
    player.on('mouseout', function() {
      player.controlBar.hide();
    });
    */

    player.play();
  </script>
</body>
</html>

总结

本文介绍了如何使用HTML和VideoJS来实现保持控件可见的功能。我们可以通过使用AlwaysVisibleControlsPlugin插件或自定义CSS样式来实现控件栏的始终可见。选择适合自己项目需求的方法，并进行相应的配置即可实现该功能。希望本文对您理解和使用HTML VideoJS有所帮助！