📌  相关文章
📜  js 更改视频 src - Javascript (1)

📅  最后修改于: 2023-12-03 15:32:23.630000             🧑  作者: Mango

通过 JavaScript 更改视频 src

在 web 开发中，有时候需要通过 JavaScript 更改视频的 src 属性，来实现动态切换视频的功能。下面将介绍如何通过 JavaScript 来更改视频的 src。

HTML 代码

首先，我们需要在 HTML 文件中添加一个 video 标签，用于显示视频。下面是一个示例代码：

<video id="myVideo" width="400">
  <source src="video1.mp4" type="video/mp4">
</video>

在这段代码中，我们定义了一个 id 为 "myVideo" 的 video 标签，同时指定了视频文件的 src。这里我们使用了一个 mp4 格式的视频文件 "video1.mp4"。

JavaScript 代码

接下来，我们需要编写 JavaScript 代码，来动态更改视频的 src。代码如下：

let myVideo = document.getElementById("myVideo");
myVideo.src = "video2.mp4";
myVideo.load();
myVideo.play();

这段代码中，我们首先使用 document.getElementById 方法来获取 id 为 "myVideo" 的 video 标签。然后，我们更改了其 src 属性为 "video2.mp4"。

接着，我们调用了 load() 方法，将新视频文件加载进来。

最后，我们调用了 play() 方法来播放新的视频。

完整示例代码

下面是一个完整的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Change Video Src</title>
</head>
<body>
  <video id="myVideo" width="400">
    <source src="video1.mp4" type="video/mp4">
  </video>

  <script>
    let myVideo = document.getElementById("myVideo");
    myVideo.src = "video2.mp4";
    myVideo.load();
    myVideo.play();
  </script>
</body>
</html>

在这段代码中，我们首先定义了一个 video 标签，并指定了初始的视频文件 "video1.mp4"。接着，我们在 script 标签中编写了 JavaScript 代码，来更改视频文件的 src，并播放新的视频。

结论

通过上述方法，我们可以很方便地通过 JavaScript 更改视频的 src 属性，来实现动态切换视频的功能。