使用<video>标签可实现网页视频播放，通过autoplay、loop、muted属性控制自动与循环播放，提供MP4、WebM等多格式源以兼容不同浏览器，并结合JavaScript创建自定义播放控制，如播放/暂停按钮，确保跨浏览器测试以优化体验。
HTML代码实现视频播放，核心在于<video>标签。它允许你在网页中嵌入视频，并提供基本的播放控制功能。接下来，我们就来深入探讨一下如何使用<video>标签以及一些高级的视频播放控制技巧。
<video>标签的基本用法
如何实现自动播放、循环播放？
如何兼容不同浏览器？
立即学习“前端免费学习笔记（深入）”；
如何添加自定义播放器控制？
<video>标签的基本用法
<video>标签的使用非常简单。你需要做的就是将视频源文件放入<source>标签中，并指定视频的类型。例如：
<video width="640" height="360" controls> <source src="myvideo.mp4" type="video/mp4"> <source src="myvideo.webm" type="video/webm"> 您的浏览器不支持 HTML5 视频。 </video>
这段代码会嵌入一个宽度为640像素，高度为360像素的视频。controls属性会显示默认的播放控制条，包括播放/暂停按钮、音量控制、进度条等。source标签指定了两个视频源，分别是MP4和WebM格式。浏览器会尝试加载第一个支持的格式。如果浏览器不支持HTML5视频，则会显示“您的浏览器不支持 HTML5 视频。”这段文字。
如何实现自动播放、循环播放？
想要让视频自动播放，可以使用autoplay属性。要让视频循环播放，可以使用loop属性。需要注意的是，有些浏览器可能会阻止自动播放，特别是当视频包含音频时。例如：
<video width="640" height="360" controls autoplay loop muted> <source src="myvideo.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 视频。 </video>
这里添加了autoplay和loop属性，并且为了避免自动播放被阻止，还加入了muted属性，让视频静音播放。用户可以手动取消静音。
如何兼容不同浏览器？
不同浏览器对视频格式的支持有所不同。为了确保视频能在大多数浏览器上正常播放，最好提供多种格式的视频源。常见的视频格式包括MP4、WebM和Ogg。MP4格式通常由大多数浏览器支持，WebM格式是Google推荐的开源格式，而Ogg格式则相对较少使用。
如何添加自定义播放器控制？
默认的播放器控制条可能无法满足所有需求。这时，你可以使用JavaScript和<video>标签的API来创建自定义的播放器控制。例如，你可以创建自定义的播放/暂停按钮、进度条、音量控制等。
首先，你需要获取<video>元素：
const video = document.querySelector('video');
const playButton = document.getElementById('play-button');然后，你可以添加事件监听器来控制视频的播放和暂停：
playButton.addEventListener('click', function() {
if (video.paused) {
video.play();
playButton.textContent = 'Pause';
} else {
video.pause();
playButton.textContent = 'Play';
}
});这段代码会在点击播放按钮时，切换视频的播放和暂停状态，并更新按钮的文本。
你可以使用类似的方法来创建其他的自定义控制，比如进度条和音量控制。通过JavaScript，你可以完全掌控视频播放器的外观和行为，实现更高级的视频播放功能。例如，你可以添加字幕、章节选择、画中画模式等等。
最后，别忘了测试你的代码在不同浏览器上的兼容性，确保所有用户都能获得良好的视频播放体验。
