数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究在 Video.js 播放器中设置视频海报
在本教程中，我们将学习如何为使用 video.js 创建的视频播放器设置海报图像。Video.js 是一个非常流行且知名的开源 HTML 视频播放器框架。它支持许多视频格式，从标准视频格式（如 mp4、WebM、Flv 等）到其他现代视频播放格式（如 YouTube、Vimeo、twitch 等）。Video.js 如此广泛地被接受，因为它在创建视频播放器时提供了灵活性和自定义选项以及支持。
在本教程中，我们将通过为视频添加海报图像来改变视频播放器的外观。海报图像是在网页加载且最终用户尚未播放视频时显示的图像文件。海报图像非常有用，因为它可以展示视频的内容，也可以作为视频的缩略图，从而吸引最终用户播放视频。因此，视频海报图像有很多用途。现在让我们继续本文的下一部分，了解如何使用 video.js 为视频添加海报图像。
在 Video.js 播放器中设置视频海报
为了在视频播放器上显示海报图像，我们将使用 video.js 提供的“poster”选项方法。此方法接受图像路径作为值，并显示作为视频海报传递的图像。此选项支持 png、jpg 等广泛接受的图像格式的源图像。
“poster”属性可以通过两种不同的方法使用。
使用带有 <video> 标签的“data-setup”
使用 js 动态设置海报
让我们快速了解这两种方法。
使用“data-setup”属性设置海报
先决条件 - 假设您知道如何使用 video.js 库创建基本的视频播放器。
要将视频海报图像添加到我们的视频中，我们需要在 <video> 标签的“data-setup”属性中传递带有图像文件路径的“poster”选项。请考虑以下代码片段以实现相同的功能。
<video
id="my-video"
class="video-js vjs-default-skin vjs-big-play-centered"
controls="true"
muted="true"
preload="auto"
width="560"
height="340"
data-setup='{ "poster": "assets/sample.png" }'
>
在上面的代码片段中，我们在 <video> 元素的“datasetup”属性中添加了一个 PNG 图像文件作为海报。请确保图像文件的源路径根据您的本地目录正确。
示例 1
带有海报图像的完整视频播放器示例如下所示：
<!DOCTYPE html> <html> <head> <title>Video.JS Video Poster Image Tutorial</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" class="video-js vjs-default-skin vjs-big-play-centered" controls="true" muted="true" preload="auto" width="560" height="340" data-setup='{ "poster": "https://tutorialspoint.com/videos/sample.png" }' > <source src="https://tutorialspoint.com/videos/sample720.mp4" type="video/mp4" > </video> <script> // Initializing the video player with video options var player = videojs('my-video'); </script> </body> </html>
在上面的代码中，我们做了以下操作：
首先，我们使用 CDN URL 在 <head> 标签中导入了 video.js CSS 和 JS 文件。
接下来，在 <body> 标签内，我们创建了一个 <video> 元素，其类为“video.js vjs-default-skin vjs-big-play-centered”，且“id”为“my-video”。我们在下面的 <script> 标签中使用了此 id 来引用播放器。一些标准的 HTML 视频选项（如 controls、muted、width 和 height）也包含在 <video> 标签中。
在 <video> 标签的“data-setup”属性中，我们传递了要显示在视频上的海报图像。
如果我们执行上述代码，它将创建一个视频播放器，该播放器将显示我们在“data-setup”属性中传递的海报图像。播放视频后，海报图像将不会显示。它仅在点击视频的播放按钮或视频未播放之前显示。因此，请确保此类视频的“autoplay”属性设置为 False。
现在我们已经了解了如何在 video.js 播放器中为视频设置海报图像，我们可以继续了解使用 JavaScript 动态调用海报图像方法的第二种方法。
Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.
使用 JavaScript 和视频选项动态设置海报
在本教程的这一部分中，我们将看到如何使用 JavaScript 动态设置海报图像。此方法相对于先前方法的优势在于，所有操作都在 HTML 代码的 JavaScript (<script> 标签) 部分处理，这使代码更易于阅读和管理。此外，使用此方法可以更好地控制视频播放器。
要在 JavaScript 中为我们的视频播放器显示海报图像，首先，我们需要创建一个包含带有图像文件源路径的 poster 属性的 JS 对象，然后将其传递给 video.js 播放器引用。
请考虑以下代码片段，以使用 JavaScript 为我们的视频播放器动态添加海报。
<script>
// Setting up poster image with video options
let videoOptions = {
"poster": "assets/sample.png"
}
// Initializing the video player with video options
var player = videojs('my-video', videoOptions);
</script>
在上面的代码片段中，我们添加了带有示例 PNG 文件路径的海报图像，并将其传递到视频播放器引用的初始化中，该引用在其中具有“myvideo”的 id。
示例 2
将上述代码片段添加到完整示例中将使代码如下所示：
<!DOCTYPE html> <html> <head> <title>Video.JS Video Poster Image Tutorial</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" class="video-js vjs-default-skin vjs-big-play-centered" controls="true" muted="true" preload="auto" width="560" height="340" data-setup='{}' > <source src=" https://tutorialspoint.com/videos/sample720.mp4" type="video/mp4" > </video> <script> // Setting up poster image with video options let videoOptions = { "poster": " https://tutorialspoint.com/videos/sample.png" } // Initializing the video player with video options var player = videojs('my-video', videoOptions); </script> </body> </html>
如果您仔细观察上面的示例，我们会发现我们从 <video> 标签的“data-setup”属性中删除了 poster 图像选项。相反，我们在 <script> 标签中动态地将示例 PNG 图像作为海报添加到我们的视频中。
但是，当您在 Web 浏览器中执行上述代码时，将创建与上述示例相同的视频播放器。它将具有相同的海报图像，并且此海报图像仅在视频播放之前显示。
因此，我们可以使用上述任何方法使用 video.js 创建带有海报图像的视频播放器。
此外，video.js 还允许您使用 <style> 标签中的“.vjs-poster”类来控制海报图像的 CSS。例如：如果您想将海报图像的背景大小设置为 100%，以便它填充整个视频并且没有黑色区域，则可以使用 <head> 标签中的以下代码来实现。
<!-- CSS for Poster Image -->
<style>
.vjs-poster{
background-size: 100% !important;
}
</style>
在我们的示例中使用上述代码将使显示图像为 100%。因此，您可以对“.vjs-poster”类上的任何 CSS 图像属性进行自定义。
示例 3
将 CSS 添加到上述示例中将使示例如下所示：
<!DOCTYPE html> <html> <head> <title>Video.JS Speed Up/Down Video Tutorial</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> <!-- CSS for Poster Image --> <style> .vjs-poster{ background-size: 100% !important; } </style> </head> <body> <video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls="true" muted="true" preload="auto" width="560" height="340" data-setup='{}' > <source src=" https://tutorialspoint.com/videos/sample720.mp4" type="video/mp4" > </video> <script> // Setting up poster image with video options let videoOptions = { "poster": "https://tutorialspoint.com/videos/sample.png" } // Initializing the video player with video options var player = videojs('my-video', videoOptions); </script> </body> </html>
执行上述代码将创建一个带有海报图像的视频播放器，该海报图像已填充以覆盖屏幕的 100%。
结论
在本教程中，我们了解了如何为使用 video.js 播放器创建的视频设置海报图像。我们使用两种方法将海报图像添加到视频中，然后了解了如何在几个示例的帮助下使用“.vjs-poster”类更改显示图像的 CSS。
5K+ 阅读量
