在 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' 属性可以通过两种不同的方法使用。
将 'data-setup' 与 <video> 一起使用
使用 js 动态设置海报
使用 js 动态设置海报
让我们快速浏览一下这两种方法。
使用 'data-setup' 属性设置海报
前提条件 - 假设您知道如何使用 video.js 库创建基本的视频播放器。
为了将视频海报图片添加到我们的视频中，我们需要将 'poster' 选项以及 'data-setup' 属性中图片文件的路径传递给 <video> 标签。请参考以下代码片段来实现相同的效果。
<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://www.cainiaomax.com/videos/sample.png" }'
>
<source
src="https://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 使用视频选项初始化视频播放器
var player = videojs('my-video');
</script>
</body>
</html>
在上面的代码中，我们完成了以下操作:
首先，我们在 <head> 标签中使用 CDN URL 导入了 video.js CSS 和 JS 文件。
接下来，在 <body> 标签内，我们创建了一个 <video> 元素，其 class="video.js vjs-default-skin vjs-big-play-centered"，id 为 'my-video'。我们在下面的 <script> 标签中使用了这个 id 来引用播放器。一些标准的 HTML 视频选项，例如控件、静音、宽度和高度，也包含在 <video> 标签中。
在 <video> 的 'data-setup' 属性内标签中，我们传递了将在视频上显示的海报图片。
执行上述代码后，将创建一个视频播放器，用于显示我们在"data-setup"属性中传递的海报图片。视频播放结束后，海报图片不会显示。它只会在我们未点击视频的播放按钮或视频未播放之前显示。因此，请确保将此类视频的"autoplay"属性设置为 False。
现在我们已经学习了如何在 video.js 播放器中为视频设置海报图片，接下来我们将学习第二种使用 JavaScript 动态调用海报图片方法的方法。
使用 JavaScript 通过视频选项动态设置海报
在本教程的这一部分，我们将学习如何使用 JavaScript 动态设置海报图片。与上一种方法相比，此方法略有优势，因为所有操作都在 HTML 代码的 JavaScript(<script> 标签)部分处理，这使得代码更具可读性和可管理性。此外，使用此方法还能让您更好地控制视频播放器。
要在 JavaScript 中为视频播放器显示海报图像，首先，我们需要创建一个包含 poster 属性的 JS 对象，该属性包含图像文件的源路径，然后将其传递给 video.js 播放器引用。
请考虑以下代码片段，该代码片段使用 JavaScript 动态将海报添加到视频播放器。
<script>
// 使用视频选项设置海报图像
let videoOptions = {
"poster": "assets/sample.png"
}
// 使用视频选项初始化视频播放器
var player = videojs('my-video', videoOptions);
</script>
在上面的代码片段中，我们将海报图片及其路径添加到示例 PNG 文件中，并将其传递给视频播放器引用的初始化，该引用的 id 为"myvideo"。
示例 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://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 使用视频选项设置海报图像
let videoOptions = {
"poster": " https://www.cainiaomax.com/videos/sample.png"
}
// 使用视频选项初始化视频播放器
var player = videojs('my-video', videoOptions);
</script>
</body>
</html>
如果您仔细观察上面的示例，就会发现我们从 <video> 标签的"data-setup"属性中移除了海报图片选项。取而代之的是，我们在 <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://www.cainiaomax.com/videos/sample720.mp4"
type="video/mp4"
>
</video>
<script>
// 使用视频选项设置海报图像
let videoOptions = {
"poster": "https://www.cainiaomax.com/videos/sample.png"
}
// 使用视频选项初始化视频播放器
var player = videojs('my-video', videoOptions);
</script>
</body>
</html>
执行上述代码将创建一个视频播放器，其中的海报图像已填充至屏幕的 100%。
总结
在本教程中，我们了解了如何为使用 video.js 播放器创建的视频设置海报图像。我们使用两种方法将海报图像添加到视频中，然后通过几个示例了解了如何使用".vjs-poster"类更改显示图像的 CSS。
