HTML5视频标签

HTML5 是一种新的网页编程语言，它提供了一些新的元素和属性，使得开发者能够创建更加丰富、动态的网页，HTML5 视频标签是 HTML5 中的一个重要元素，它允许开发者在网页中嵌入视频内容。

HTML5 视频标签的基本语法如下：

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

在这个例子中，<video> 标签用于定义一个视频播放器，controls 属性用于显示视频控制器，如播放/暂停按钮、音量控制等。<source> 标签用于指定视频文件的来源，src 属性用于指定视频文件的路径，type 属性用于指定视频文件的格式，如果浏览器不支持 HTML5 视频标签，将显示 <video> 标签内的文本内容。

HTML5 视频标签支持多种视频格式，包括 MP4、WebM、Ogg 等，为了确保视频在所有浏览器中都能正常播放，建议提供多种格式的视频文件。

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

除了基本的视频播放器功能外，HTML5 视频标签还支持一些高级功能，如自动播放、循环播放、预加载等，这些功能可以通过添加相应的属性来实现，以下是一些常用的属性：

1、autoplay：当页面加载时自动开始播放视频。

2、loop：当视频播放结束后，自动重新开始播放。

3、preload：指定视频的加载方式，可选值有 "none"（不加载）、"metadata"（只加载元数据）和 "auto"（自动加载）。

要实现一个自动播放、循环播放的视频播放器，可以这样写：

<video autoplay loop>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

HTML5 视频标签还支持一些事件，如 play、pause、ended 等，通过监听这些事件，可以实现一些自定义的功能，如在视频播放结束时弹出提示框等，以下是一些常用的事件及其处理函数：

1、play：当视频开始播放时触发，处理函数为 onplay。

2、pause：当视频暂停播放时触发，处理函数为 onpause。

3、ended：当视频播放结束时触发，处理函数为 onended。

要在视频播放结束时弹出一个提示框，可以这样写：

<video id="myVideo" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>
<script>
var video = document.getElementById("myVideo");
video.addEventListener("ended", function() {
  alert("视频播放结束！");
});
</script>

HTML5 视频标签为开发者提供了一个简单、强大的工具，使得在网页中嵌入视频内容变得非常容易，通过掌握 HTML5 视频标签的基本语法和高级功能，开发者可以轻松地创建出丰富的、动态的视频播放器。