如何确保
<video></video> 标签主要用于在网页中嵌入视频内容，并提供内置的播放、暂停、音量控制等功能。它极大地简化了在网页上展示视频的过程，无需依赖第三方插件。
使用 <video></video> 标签，你可以轻松地将视频文件嵌入到网页中，并控制视频的播放行为。它支持多种视频格式，允许你为不同的浏览器提供兼容的视频源。
如何确保 <video></video> 标签在不同浏览器上的兼容性？
浏览器兼容性是使用 <video></video> 标签时需要考虑的重要因素。不同的浏览器可能支持不同的视频格式和编解码器。为了确保你的视频能在各种浏览器上正常播放，最佳实践是提供多种格式的视频源。
立即学习“前端免费学习笔记（深入）”；
你可以使用 <source></source> 标签在 <video></video> 标签内指定多个视频源。浏览器会按照列出的顺序尝试加载这些源，选择它支持的第一个源。
<video width="640" style="max-width:90%" controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> <source src="myvideo.ogv" type="video/ogg"> 您的浏览器不支持 HTML5 视频。 </video>
在这个例子中，我们提供了 MP4、WebM 和 Ogg 三种格式的视频源。大多数现代浏览器都支持 MP4，而 WebM 和 Ogg 则为那些不支持 MP4 的浏览器提供了备选方案。
此外，你还可以使用 JavaScript 来检测浏览器对特定视频格式的支持情况，并根据检测结果动态地设置视频源。这可以提供更精细的控制，但通常情况下，使用 <source></source> 标签就足够了。
最后，别忘了包含一个“您的浏览器不支持 HTML5 视频”的消息。如果浏览器完全不支持 <video></video> 标签，则会显示此消息。
<video></video> 标签的常用属性有哪些？如何使用？
<video></video> 标签提供了许多属性，用于控制视频的播放行为和外观。以下是一些常用的属性：
-
src: 指定视频的 URL。虽然<source></source>标签更常用，但你也可以直接在<video></video>标签中使用src属性。 -
controls: 添加浏览器提供的默认播放控件，例如播放/暂停按钮、音量控制和全屏按钮。 -
width和height: 设置视频的宽度和高度（以像素为单位）。最好显式地设置这些属性，以防止视频加载时页面布局发生变化。 -
autoplay: 指定视频是否应在页面加载后立即自动播放。请谨慎使用此属性，因为它可能会 раздражать 用户。 -
loop: 指定视频是否应在播放结束后循环播放。 -
muted: 指定视频是否应静音播放。 -
poster: 指定视频加载前显示的图像的 URL。这可以为用户提供一个预览图像，或者在视频无法播放时显示一个占位符。 -
preload: 指定浏览器应如何预加载视频。它可以有三个值：-
none: 不预加载视频。 -
metadata: 只预加载视频的元数据（例如，时长、尺寸）。 -
auto: 浏览器自行决定是否预加载视频。
-
以下是一个使用这些属性的示例：
<video width="640" height="360" controls poster="myvideo.jpg" preload="metadata"> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> 您的浏览器不支持 HTML5 视频。 </video>
在这个例子中，我们设置了视频的宽度和高度，添加了播放控件，指定了一个海报图像，并指示浏览器只预加载视频的元数据。
如何使用 JavaScript 控制 <video></video> 标签的播放？
虽然 <video></video> 标签提供了默认的播放控件，但有时你可能需要使用 JavaScript 来更精细地控制视频的播放行为。例如，你可能想要创建自定义的播放控件，或者根据用户的交互来调整视频的播放速度。
<video></video> 标签提供了一组 JavaScript API，允许你访问和控制视频的各种属性和方法。以下是一些常用的 API：
-
play(): 开始播放视频。 -
pause(): 暂停视频。 -
currentTime: 获取或设置视频的当前播放时间（以秒为单位）。 -
duration: 获取视频的总时长（以秒为单位）。 -
volume: 获取或设置视频的音量（范围是 0 到 1）。 -
muted: 获取或设置视频是否静音。 -
playbackRate: 获取或设置视频的播放速度（1 是正常速度，0.5 是半速，2 是双倍速）。
以下是一个使用 JavaScript 控制 <video></video> 标签的示例：
<video id="myVideo" width="640" height="360" controls>
<source src="myvideo.mp4" type="video/mp4">
您的浏览器不支持 HTML5 视频。
</video>
<button onclick="playPause()">播放/暂停</button>
<script>
var video = document.getElementById("myVideo");
function playPause() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
</script>在这个例子中，我们添加了一个按钮，点击该按钮可以播放或暂停视频。JavaScript 代码首先获取对 <video></video> 元素的引用，然后定义一个 playPause() 函数，该函数会检查视频是否已暂停。如果是，则调用 play() 方法开始播放视频；否则，调用 pause() 方法暂停视频。
通过使用这些 JavaScript API，你可以创建功能丰富的视频播放器，并为用户提供更好的观看体验。
