Video标签详解

参考

菜鸟：HTML <video> 标签

掘金：H5 video标签使用 

            H5 video 开发问题及相关知识点

博客：html5中video标签的用法

MDN：<video>: 视频嵌入元素

HTML Video——如何用 HTML 5 Video 标签嵌入视频播放器

html5视频媒体标签video的使用方法及完整参数说明

注意

1、使用 object-position 和 object-fit 设置 video 中图像位置和大小

2、如果使用 autoplay="false" 来关闭视频的自动播放功能，会不起作用；只要 <video> 标签中有 autoplay 属性，视频就会自动播放。要移除自动播放，需要完全删除该属性在某些浏览器（例如 Chrome 70.0）中，如果没有设置 muted 属性，autoplay 将不会生效。

3、height和width属性，单位是 CSS 像素（仅限绝对值；不支持百分比）。
4、在使用封面图的时候遇到过封面图先在视频区域缩小再放大加载的情况，可以在视频的外层容器增加background-size: 100% 100%

实例

<div v-if="isShowVideo()" class="head-top-video">
      <video
        width="100%"
        height="100%"
        class="item-video"
        src="./img/head.mp4"
        autoplay="true"
        loop="true"
        muted="true"
        object-fit="fill"
        playsinline="true"
        webkit-playsinline="true"
        x5-playsinline="true"
        x5-video-player-type="h5"
        x5-video-orientation="landscape|portrait"
        x-webkit-airplay="deny"
        disableRemotePlayback="true"
        poster="./img/topya.jpg"
      />
</div>

.head-top-video {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}