前言

• 这几天在公司做项目的时候，业务那边给我一段mp4格式的视频，我本地做完，测试没问题，放到客户端上就不行了，显示的整个页面就是下面这样，上网找了原因，最终原因就是因为第三方公司所提供的客户端模板不支持mp4格式的视频，浪费了我长时间😡😡😡（我最后转成webm格式的了，我看网上说，这种格式的视频兼容性是最好的）；
• 以下就是在实现功能的过程中，业务那边提到的一些小功能；

一、支持多格式

<!-- controls：显示全部控件 -->
<video class="new_tip" id="video" controls>
  <!-- type="video/当前视频的格式" -->
  <source src="视频路径/xxx.webm" type="video/webm" />
  <source src="视频路径/xxx.mp4" type="video/mp4" />
</video>

说明：

• <source>标签可以有多个；
• 浏览器需要选择它所支持的源文件；
• 从上到下筛选，如果选中一个后面的就不看了；
• 如果都支持，则任选一个（默认选择第一个，我自己测得选择的是第一个）；

<source> 简介：

• <source>标签为媒体元素（audio、video）定义媒体资源；
• <source>标签允许您规定两个视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择；
• src属性：规定媒体资源的url地址；
• type属性：规定媒体资源的 MIME 类型；
• media属性：规定媒体资源的类型，供浏览器决定是否下载；
• size属性：不同页面布局设置不同图片大小；
• srcset属性：<source>应用于<picture>标签时需要使用到。指定在不同情况下使用的图像url；

二、隐藏下载按钮

<!-- controlsList="nodownload" -->
<video class="new_tip" id="video" controls controlsList="nodownload">
  <source src="视频路径/xxx.webm" type="video/webm" />
  <source src="视频路径/xxx.mp4" type="video/mp4" />
</video>

三、去除画中画按钮

<!-- disablePictureInPicture -->
<video class="new_tip" id="video" controls controlsList="nodownload" disablePictureInPicture>
  <source src="视频路径/xxx.webm" type="video/webm" />
  <source src="视频路径/xxx.mp4" type="video/mp4" />
</video>

注意：

• 必须是 disablePictureInPicture 这种写法，如果写成 disable-picture-in-picture这样，是不会生效的

四、隐藏全屏按钮

#video::-webkit-media-controls-fullscreen-button {
  display: none;
}

说明：

• 这里我只是写了针对谷歌浏览器的，为了兼容性，大家最好把五种浏览器的内核都加上；

五、练习

• 大家可以在下面的链接上进行修改，查看上面的属性等等；
• 也可以对链接进行修改，测试 <source>标签；
•