参考
掘金：H5 video标签使用
MDN：<video>: 视频嵌入元素
HTML Video——如何用 HTML 5 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%
5、iOS13低电量无法自动播放，所以可以在低电量时展示静态图兜底，并且有些低端机也无法播放视频，也可以使用静态图兜底
实例
<templete>
<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> </templete>
<script> /** * 是否低端机 * @returns true | false */ export const isLowDevice = () => { const [, ISLP = ''] = navigator.userAgent?.match(/ISLP\/(\d)/) || []; return Number(ISLP) === 1; }; /** * 是否进入Crash兜底策略 * @returns true | false */ export const isICFO = () => { const [, ICFO = ''] = navigator.userAgent?.match(/ICFO\/(\d)/) || []; return Number(ICFO) === 1; }; // 低电量模式当低端机处理 export const isLSLB = () => { const [, ICFO = ''] = navigator.userAgent?.match(/ISLB\/(\d)/) || []; return Number(ICFO) === 1; }; export const isLowDeviceBiz = (): boolean => { return isLowDevice() || isICFO() || isLSLB(); };
</script>
<style> .head-top-video { position: absolute; width: 100%; height: 100%; background-size: 100% 100%; }
</style>
tip：代码通过ua中ICFO、ISLP、ISLB判断是否是低端机、以及低电量等都是内部封装好的
今天的文章video标签的用法_img是单标签吗分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：http://bianchenghao.cn/50502.html
