JavaScript 更改视频海报

在 Web 开发中，我们经常需要在页面上显示视频，并且有时候需要更改视频的海报（即视频播放前显示的图片）。在 JavaScript 中，我们可以使用一些技术来实现更改视频海报的功能。本文将介绍如何使用 JavaScript 更改视频海报。

1. HTML

首先，我们需要在 HTML 文件中添加一个视频元素，以及一个用于更改海报的按钮。以下是一个示例的 HTML 代码：

<video id="myVideo" src="video.mp4" poster="default-poster.jpg" controls></video>
<button onclick="changePoster()">更改海报</button>

在上面的代码中，<video> 元素用于显示视频，并设置了一个默认的海报图片 (poster 属性)。<button> 元素是一个点击按钮，点击后会调用 JavaScript 函数 changePoster() 来更改海报。

2. JavaScript

接下来，我们需要编写一个 JavaScript 函数来更改视频海报。以下是一个示例的 JavaScript 代码：

function changePoster() {
  var video = document.getElementById("myVideo");
  video.setAttribute("poster", "new-poster.jpg");
}

在上面的代码中，changePoster() 函数首先获取了 <video> 元素，然后使用 setAttribute() 方法来更改海报。setAttribute() 方法接受两个参数，第一个参数是要更改的属性名（这里是 "poster"），第二个参数是要设置的新值（这里是 "new-poster.jpg"）。

3. 运行效果

当用户点击“更改海报”按钮时，changePoster() 函数会被触发，视频的海报将会被更改为新的图片。

请注意，你需要将视频文件和海报图片放置在与 HTML 文件相同的目录下，或者根据自己的需求修改代码中的文件路径。

以上就是使用 JavaScript 更改视频海报的简单示例。你可以根据自己的需求进一步扩展代码，例如通过用户上传图片来更改海报，或者添加动画效果等等。JavaScript 提供了丰富的 API 和工具来操作 DOM 元素，让你能够实现各种各样的交互功能。

希望本文能帮助你了解如何使用 JavaScript 更改视频海报！