【Video标签的详细使用及案例介绍，看完通透直接学会！】

前言

好久没更新了，最近工作上项目比较忙，在2024年的最后一天给大家分享一下近期项目所遇到的问题的一些分享

一、video标签

video标签是HTML5的标签，表示视频嵌入元素，video元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/videohttps://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

简单介绍一下常用的几种属性，有兴趣的可以去官方文档了解

src属性

指定视频文件的 URL，可以是相对路径或绝对路径。也可以是网络地址。

controls属性

显示视频控件（播放、暂停、音量、全屏等），如果不需要展示控件，不写此属性也可，也可以通过CSS样式控制。

     video::-webkit-media-controls-enclosure {
      display: none;
    } 

autoplay属性

视频文件在页面加载完成后自动播放。（在大部分浏览器都默认设置了禁止自动播放，特别是移动设备）

loop属性

视频文件播放结束后自动重新播放。

muted属性

初始加载时将视频设置为静音。

preload