Video标签详解

参考

菜鸟:HTML <video> 标签

掘金:H5 video标签使用 

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

博客:html5中video标签的用法

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

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

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

关于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判断是否是低端机、以及低电量等都是内部封装好的

 

posted @ 2023-01-31 20:34  坤嬷嬷  阅读(3341)  评论(0编辑  收藏  举报