数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在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”属性的视频标签中将“customControlsOnMobile”选项引用设置为true。
此外，我们需要确保触摸屏设备的原生Android或移动控件不会显示在我们的自定义video.js控件的位置。因此，为了禁用移动设备的原生触摸控件，我们将“nativeControlsForTouch”选项引用设置为false，同样在<video>元素的“data-setup”属性中。
请考虑以下代码片段，用于在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://tutorialspoint.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://tutorialspoint.com/videos/sample.png"
data-setup='{ "customControlsOnMobile": true, "nativeControlsForTouch": false }'
>
<source
src="https://tutorialspoint.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等类。
video元素的“id”（即“my-video-player”）稍后在代码的<script>部分中用于为此id创建视频播放器。
我们还使用了<video>元素的一些标准HTML视频选项，例如controls、muted和poster，并使用了fluid属性来使视频播放器具有响应性。
对于源，我们使用了一个mp4视频，我们在源标签中将其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>
// custom controls on mobile devices using video options
const videoOptions = {
"customControlsOnMobile": true,
"nativeControlsForTouch": false
}
// Initializing the video player using video options
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://tutorialspoint.com/videos/sample.png"
data-setup='{}'
>
<source
src="https://tutorialspoint.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// custom controls on mobile devices using video options
const videoOptions = {
"customControlsOnMobile": true,
"nativeControlsForTouch": false
}
// Initializing the video player using video options
const player = videojs('my-video-player', videoOptions);
</script>
</body>
</html>
在这个示例中，我们使用javascript在<script>标签中动态地将'customControlsOnMobile'属性设置为true，并将'nativeControlsForTouch'设置为false，如果您仔细观察，<video>标签的'data-setup'属性中的所有选项引用都已被删除。
但是，当上述代码在Android移动浏览器中执行时，您会注意到视频播放器已正确创建，它将具有自定义video.js控件，而不是Android原生控件。
结论
在本教程中，我们了解了如何在Android设备上设置video.js播放器。我们研究了在Android视频播放器中启用自定义video.js控件并禁用Android原生控件的两种可用方法，以防止它们覆盖video.js控件。我们还看到了每种方法的一个完全有效的示例。
862 次浏览
