更新记录

1.0.0（2023-03-20）

-

平台兼容性

dom-video 使用原生dom在uniapp-vue中播放视频

缘由

• uniapp-vue项目中需要播放视频，uniapp的video组件在层级太高，无法遮挡，所以使用原生dom的video标签在APP中播放视频
• 通过原生dom的video进行视频播放，可以被其他元素进行覆盖、遮挡，页面具有更高的定制性

使用说明

props 传值:

src: '' // 视频地址
autoplay: false // 是否自动播放
loop: false // 是否循环播放
controls: false // 是否显示控制栏
objectFit: 'contain' // 视频尺寸与video区域的适应模式
muted: false // 是否静音
poster: '' // 视频封面

事件:

play: () => {} // 播放事件
pause: () => {} // 暂停事件
ended: () => {} // 播放结束事件

例子:

<dom-video
ref="domVideo"
:src="src"
/>

调用方法:

let domVideo = this.$refs.domVideo
domVideo.play()

重点说明:

• 因dom原生的video组件无自动显示封面的功能，所以需要自己实现，目前是进行播放第一帧的图片进行封面展示
• Android加载大视频较慢时，可能会出现一个默认的播放按钮，这个是原生video组件的特性，无法解决

功能

• 通过原生dom的video进行视频播放
• 该视频组件属性几乎与uniapp的video组件一致
• 该视频播放组件可以被其他元素进行遮挡、覆盖