如何在 Android 设备上设置 video.js 播放器?

在本教程中，我们将学习如何在 Android 设备上设置 video.js 播放器。video.js 是一个用于创建现代外观视频播放器的网络视频播放器库。video.js 的一大优点是它支持各种显示尺寸，例如台式机、笔记本电脑、手机等。此外，它还支持多种视频格式，无论是标准格式还是现代格式，例如 mp4、Flv、YouTube 等。

在本教程中，我们将学习如何在 Android 设备上设置 video.js 播放器。有时，使用 video.js 创建的视频播放器在 Android 手机上无法正常工作，或者 video.js 控件有时无法在 Android 设备上显示。现在，让我们进入本教程的下一部分，了解如何使用 video.js 在 Android 中正确设置视频播放器。

在 Android 中设置 Video.js 播放器

Android 是一款非常流行的开源移动操作系统，它基于 Linux 内核的修改版本。它主要面向带有触摸屏的移动设备，例如智能手机和平板电脑。自 2011 年以来，Android 一直是最畅销的操作系统，每月活跃用户超过 30 亿。

使用 video.js 创建的视频播放器在 Android 网页浏览器或应用中运行良好，没有太多麻烦。但有时 video.js 播放器的自定义控件无法在移动设备上显示，而原生 Android 控件会接管。

在使用 video.js 在 Android 中设置视频播放器时，我们需要确保显示的是自定义 video.js 控件，而不是原生 Android 控件。为此，我们有两种方法 -

• 使用"data-setup"属性设置自定义 Android 控件

• 使用 JS 动态设置自定义 Android 控件

让我们深入了解每种方法 -

使用"Data-setup"属性设置自定义 Android 控件

前提条件 - 假设您知道如何使用 video.js 库创建一个基本的视频播放器。

要在移动设备上设置自定义控件，我们需要使用"data-setup"属性在视频的"video"标签中将"customControlsOnMobile"选项引用设置为 true。

此外，我们需要确保触摸屏设备的原生 Android 或移动控件不会显示在我们自定义的 video.js 控件的位置。因此，为了禁用移动设备的原生触摸控件，我们将在 <video> 元素的"data-setup"属性中将"nativeControlsForTouch"选项引用设置为 false。

请考虑以下代码片段，该代码片段用于在 Android 中使用自定义 video.js 控件设置视频播放器 -

<video
   id="my-video-player"
   class="video-js vjs-default-skin vjs-big-play-centered"
   preload="true"
   controls="true"
   fluid="true"
   muted="true"
   autoplay="true"
   poster="assets/sample.png"
   data-setup='{ "customControlsOnMobile": true, "nativeControlsForTouch": false }'
>
<source
   src="https://www.cainiaomax.com/videos/sample720.mp4"
   type="video/mp4"
>
</video>

在上面的代码摘录中，我们在 <video> 元素的"data-setup"属性中使用了"customControlsOnMobile"和"nativeControlsForTouch"选项引用。"customControlsOnMobile"选项的值已设置为 true，以确保我们的自定义 video.js 控件即使在移动设备上也能显示;而"nativeControlsForTouch"选项的值已设置为 false，以防止原生 Android 控件接管我们的视频播放器。

注意 − 由于 data-setup 属性接受 JSON 对象，请确保在 data-setup 属性中传递的是有效的 JSON 字符串，否则代码将无法正常执行。

示例 1

在 Android 中使用自定义 video.js 控件设置 video.js 播放器的完整示例 −

<!DOCTYPE html>
<html>
<head>
   <title>Video.JS Player in Android Example</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"
      preload="true"
      controls="true"
      fluid="true"
      muted="true"
      autoplay="true"
      poster=" https://www.cainiaomax.com/videos/sample.png"
      data-setup='{ "customControlsOnMobile": true, "nativeControlsForTouch": false }'
   >
   <source
      src="https://www.cainiaomax.com/videos/sample720.mp4"
      type="video/mp4"
   >
   </video>
   <script>
      // Initializing the video player
      const player = videojs('my-video-player');
   </script>
</body>
</html>

在此代码示例中，我们实现了以下内容:

• 首先，我们使用 video.js 的免费 CDN URL 在代码的 <head> 部分导入 video.js 所需的 CSS 和 JS 文件。

• 此外，我们在代码的 <body> 部分创建了一个 <video> 元素。该 <video> 元素已使用 video.js、video-default-skin 和 vjs-big-play-centered 等类进行了初始化。

• 视频元素的"id"，即"my-video-player"，稍后将在 <script> 中使用。代码部分，为此 ID 创建视频播放器。

• 我们还为 <video> 元素使用了一些标准 HTML 视频选项，例如控件、静音和海报，并使用了 fluid 属性使视频播放器具有响应式功能。

• 对于源，我们使用了 mp4 视频，并在 source 标签中将其 MIME 类型指定为 video/mp4。

• 在 <script> 标签中，已为 ID 为"my-video-player"的 <video> 元素初始化视频播放器。

• 在 <video> 的"data-setup"属性中标签中，我们将"customControlsOnMobile"选项设置为 true，并将"nativeControlsForTouch"选项的引用值设置为 false。

当上述代码在 Android 浏览器中执行时，会创建一个 video.js 播放器，并且它将包含自定义的 video.js 控件。

我们已经学习了使用 video.js 控件在 Android 中创建视频播放器的第一种方法，接下来我们将学习本教程的后续部分，了解实现相同目标的另一种方法。

使用 JS 动态设置自定义 Android 控件

在本教程的这一部分，我们将学习如何使用 video.js 动态启用移动设备的自定义控件并禁用 Android 视频播放器上的原生触摸控件。

首先，我们需要在 JavaScript 中创建一个 JSON 对象，该对象将包含"nativeControlsForTouch"的值为 false(布尔值)和 customControlsOnMobile 的值为 true(布尔值)，然后我们将把这个对象传递给 video.js 播放器引用。

请考虑以下代码片段，该代码片段用于在 Android 中动态创建带有自定义 video.js 控件的 video.js 播放器 -

<script>
   // 使用视频选项在移动设备上自定义控件
   const videoOptions = {
      "customControlsOnMobile": true,
      "nativeControlsForTouch": false
   }

   // 使用视频选项初始化视频播放器
   const player = videojs('my-video-player', videoOptions);
</script>

在这段代码中，我们通过将"nativeControlsForTouch"的值设置为 false 来禁用 Android 原生触摸控件，同时通过将"customControlsOnMobile"设置为 true 来启用移动设备上的自定义 video.js 控件。之后，我们将视频选项传递给视频播放器引用的初始化，该引用的 id 为"my-video-player"。

这是另一种为 Android 操作系统设备正确设置 video.js 播放器的方法。

示例 2

在一个完整的示例中，使用上述代码在 Android 系统中设置带有自定义控件的 video.js 播放器，如下所示 -

<!DOCTYPE html>
<html>
<head>
   <title>Video.JS Player in Android Example</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"
      preload="true"
      controls="true"
      fluid="true"
      muted="true"
      autoplay="true"
      poster=" https://www.cainiaomax.com/videos/sample.png"
      data-setup='{}'
   >
   <source
      src="https://www.cainiaomax.com/videos/sample720.mp4"
      type="video/mp4"
   >
   </video>
   <script>
   
      // 使用视频选项在移动设备上自定义控件
         const videoOptions = {
         "customControlsOnMobile": true,
         "nativeControlsForTouch": false
      }

      // 使用视频选项初始化视频播放器
      const player = videojs('my-video-player', videoOptions);
   </script>
</body>
</html>

在本例中，我们在 <script> 标签中使用 JavaScript 动态地将 'customControlsOnMobile' 属性设置为 true，将 'nativeControlsForTouch' 设置为 false。如果您仔细观察，会发现 <video> 标签的 'data-setup' 属性中引用的所有选项都已被移除。

然而，当在 Android 移动网页浏览器中执行上述代码时，您会注意到视频播放器已正确创建，并且它将包含自定义 video.js 控件，而不是 Android 原生控件。

结论

在本教程中，我们了解了如何在 Android 设备上设置 video.js 播放器。我们研究了两种在 Android 视频播放器中启用自定义 video.js 控件以及禁用 Android 原生控件(使其不覆盖 vidoe.js 控件)的方法。我们还为上述每种方法提供了一个完整的示例。

相关文章

• 如何在 Video.js 播放器中创建视频循环?
• 如何在 Video.js 中获取当前播放时间?