HTML 动态加载并播放HTML5视频

在本文中，我们将介绍如何使用HTML动态加载和播放HTML5视频。

阅读更多：HTML 教程

什么是HTML5视频？

HTML5是第五代HTML标准，其中包含了许多新的特性和功能，其中包括能够在网页上播放视频的能力。HTML5视频元素<video>可以在不需要插件的情况下直接在网页中播放视频。

如何使用HTML5视频元素？

要使用HTML5视频元素，在<video>标签中添加视频的URL即可。以下是一个使用HTML5视频元素播放视频的示例：

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

在上面的示例中，<video>标签中的controls属性会显示一个视频控制栏，使用户可以播放、暂停、调整音量等操作。<source>标签用于指定视频的URL和类型。如果浏览器不支持HTML5视频，那么”Your browser does not support the video tag.”将会显示在<video>标签的后面。

动态加载HTML5视频

有时候，我们可能需要在用户执行某些操作后才加载和播放视频。可以使用JavaScript来实现动态加载HTML5视频。以下是一个使用JavaScript动态加载和播放HTML5视频的示例：

<button onclick="loadVideo()">加载并播放视频</button>
<div id="videoPlayer"></div>

<script>
function loadVideo() {
  var videoPlayer = document.getElementById("videoPlayer");
  var videoHTML = `<video controls>
                    <source src="movie.mp4" type="video/mp4">
                    Your browser does not support the video tag.
                  </video>`;

  videoPlayer.innerHTML = videoHTML;
}
</script>

在上面的示例中，首先创建了一个按钮，当用户点击按钮时，loadVideo()函数将会被调用。这个函数通过document.getElementById()方法获取到<div>元素，并在该元素中动态添加了一个包含视频的<video>标签。

动态播放HTML5视频

除了动态加载HTML5视频，我们还可以使用JavaScript来控制视频的播放和停止等操作。以下是一个使用JavaScript动态播放和停止HTML5视频的示例：

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<button onclick="playVideo()">播放视频</button>
<button onclick="pauseVideo()">暂停视频</button>

<script>
var myVideo = document.getElementById("myVideo");

function playVideo() {
  myVideo.play();
}

function pauseVideo() {
  myVideo.pause();
}
</script>