HTML Video标签可以嵌入视频到网页中，为网站带来更丰富的内容和交互体验。本文从多个方面对HTML Video标签进行阐述，包括属性、兼容性、流媒体、JavaScript控制和视频编解码等方面。
一、属性
HTML Video标签有多个属性可以控制视频的行为，下面介绍一些常用的属性。 1. src 属性 src属性设置视频的URL地址。
<video src="video.mp4"></video>
2. controls 属性 controls属性为视频添加了默认的控制面板，用户可以通过控制面板控制视频的播放，暂停，音量和全屏等。如果不添加该属性，则不会有默认的控制面板，需要通过JavaScript控制视频的播放等功能。
<video src="video.mp4" controls></video>
3. autoplay 属性 autoplay属性让视频自动播放,但是在某些浏览器可能会有限制，需要用户通过点击播放按钮来启动播放。
<video src="video.mp4" autoplay></video>
二、兼容性
HTML Video 标签在不同浏览器、不同操作系统上的兼容性是不一样的。 HTML5 视频是基于 MP4 、WebM 和 Ogg 格式。根据不同的编码方式（Codec），浏览器会有不同的支持。不同的操作系统也有自己的编解码库。 可以使用 caniuse.com 网站查询浏览器对 HTML5 视频的支持，以便确定要使用哪些格式和编解码。
三、流媒体
HTTP Live Streaming（HLS）是一种通过 HTTP 协议实现直播和点播的流媒体协议，iOS 和 macOS 的 Safari 浏览器都原生支持 HLS。其他浏览器支持 HLS 也有解决方案。 以下是一个使用 HLS 的例子：
<video autoplay controls width="100%">
<source src="https://example.com/hls/video.m3u8" type="application/x-mpegurl">
</video>
四、JavaScript控制
可以使用 JavaScript 控制播放、暂停、音量、时间码等视频控制。 1. play() 和 pause() play() 方法可以启动视频播放，pause() 方法可以暂停视频播放。
let video = document.querySelector('video');
video.play();
video.pause();
2. currentTime 和 duration currentTime 属性表示当前播放视频的时间，单位是秒；duration 属性是视频总时长，也是单位是秒。
let video = document.querySelector('video');
console.log(video.currentTime);
console.log(video.duration);
五、视频编解码
HTML5 视频支持多种视频编解码格式，其中 H.264 和 WebM 是最常用的两种格式。 1. H.264 H.264 是一种标准领先的视频编码标准，高效压缩视频，比其他编码方式产生更小的文件大小，且压缩质量更高。H.264 视频可以在 iOS 和 macOS 中的 Safari 浏览器中进行播放。 2. WebM WebM 是 Google 开发的一种开放、免费的视频编码 / 解码格式。使用 WebM 可以更好地支持 Chrome、Firefox 等浏览器。
总结
HTML Video 标签是嵌入视频到网页中的主要方式之一，掌握 HTML Video 标签的属性和 JavaScript 控制方法，能够更好地实现网页视频交互效果。同时，在不同浏览器、不同操作系统上的兼容性和流媒体的支持也是需要考虑的因素，选择合适的视频编解码格式，可以有效地提高视频的压缩效率和播放效果。
