很多网站建设需要在首页放置视频，为了提高网页的加载速度，减少不必要的流量消耗，需要对video标签进行优化，如按标题的要求，视频在页面加载时，不自动播放、不预加载文件，加载元数据，截取第一帧作封面，代码如下

<video 
       src="record.mp4"
       poster="record.mp4+'?spm=qipa250&x-oss-process=video/snapshot,t_1000,f_jpg,w_100,h_100,m_fast'"
       preload="meta"
       width="100%" 
       height="700px" 
       style="object-fit: fill;" 
       controls="controls"></video>

说明如下

src="record.mp4"  是视频的地址
poster=" " 是视频封面，这里是截取第一帧为封面
width="100%" 是视频宽度
height="700px" 是视频高度
object-fit: fill 是视频 图片撑满容器 
controls="controls" 是显示操作组件，如果不想要这个操作组件要删除整个controls="controls"
preload=""属性有三个，平时根据实际情况选择：
  auto - 当页面加载后载入整个视频
  meta - 当页面加载后只载入元数据
  none - 当页面加载后不载入视频

上面截取第一帧为封面的代码是针对本地视频，对OSS上面的无效。仅支持H264的视频文件进行视频截取。