解决uniapp中video标签层级过高问题：原生video标签的封装与应用
1. 为什么需要解决uniapp中video标签层级过高问题
在uniapp开发过程中，很多开发者都遇到过video组件层级过高的问题。这个问题表现为：当页面中存在弹窗、悬浮按钮等需要覆盖在视频上方的元素时，video组件总是会"浮"在最上层，遮挡其他元素。这在实际项目中会带来很多困扰，比如无法实现视频播放时的弹幕功能、无法在视频上方显示操作按钮等。
造成这个问题的根本原因在于uniapp的video组件是基于原生组件实现的。在微信小程序等平台中，原生组件的层级是固定的，会始终显示在最上层。这是小程序框架的设计限制，目的是为了保证视频播放的性能和体验。但这也给开发者带来了不小的麻烦。
我曾在多个项目中遇到过这个问题。比如在一个教育类APP中，需要在视频上方显示题目和选项；在一个电商项目中，需要在商品展示视频上添加悬浮购物车按钮。这些需求都因为video组件的层级问题而变得棘手。
2. 原生video标签封装方案的优势
相比uniapp自带的video组件，原生video标签有几个明显的优势：
首先，原生video标签的层级是可以控制的。这意味着我们可以通过z-index等CSS属性自由调整它的显示层级，完美解决覆盖问题。在实际测试中，封装后的视频组件可以正常被弹窗、悬浮按钮等元素覆盖。
其次，原生video标签的功能更加丰富。uniapp的video组件在某些平台上缺少倍速播放、精确进度控制等功能，而原生video标签则支持所有HTML5视频特性。我们在项目中就成功实现了2倍速、4倍速播放功能，这在教育类应用中非常实用。
另外，原生video标签的性能表现也很出色。经过实测，在相同网络条件下，原生video标签的加载速度和播放流畅度都与uniapp组件相当，没有明显的性能损失。
3. 封装原生video组件的完整实现步骤
3.1 组件基本结构设计
我们需要创建一个单独的vue组件来封装原生video标签。这个组件需要包含以下几个关键部分：
- 模板部分：使用v-html动态渲染video标签
- 逻辑部分：处理视频的各种状态和事件
- 样式部分：确保视频正确显示
组件的props设计也很重要，需要支持常见的视频属性：
props: { src: { type: String, default: '' }, // 视频地址 autoplay: { type: Boolean, default: false }, // 自动播放 loop: { type: Boolean, default: false }, // 循环播放 controls: { type: Boolean, default: false }, // 控制条 objectFit: { type: String, default: 'contain' }, // 填充方式 muted: { type: Boolean, default: false }, // 静音 poster: { type: String, default: '' } // 封面图 }3.2 核心功能实现
组件内部需要使用renderjs来处理原生DOM操作。这是因为uniapp的限制，直接操作DOM需要在renderjs环境中进行。
视频事件处理是关键部分。我们需要监听play、pause、ended等事件，并通过$emit将事件传递给父组件：
methods: { myplay() { this.getPlaybackProgress(true) this.$ownerInstance.callMethod('videoEvent', 'play') }, mypause() { this.getPlaybackProgress(false) this.$ownerInstance.callMethod('videoEvent', 'pause') }, myended() { this.getPlaybackProgress(false) this.$ownerInstance.callMethod('videoEvent', 'ended') } }3.3 播放进度控制实现
精确控制播放进度是视频组件的核心功能之一。我们通过setInterval定时获取当前播放时间：
getPlaybackProgress(bool) { if (bool) { this.timeSetInterval = setInterval(() => { let currentTime = this.video.currentTime let duration = this.video.duration this.$ownerInstance.callMethod('changePlaybackProgress', { currentTime, duration }) }, 1000) } else { clearInterval(this.timeSetInterval) this.timeSetInterval = null } }4. 组件使用指南与最佳实践
4.1 如何在项目中引入组件
首先将封装好的组件放在项目components目录下，然后在需要使用的地方引入：
import DomVideo from '@/components/DomVideo/DomVideo.vue' export default { components: { DomVideo } }在模板中使用：
<DomVideo ref="domVideo" @videoEvent="handleVideoEvent" @changePlaybackProgress="handleProgress" :src="videoUrl" :controls="true" class="video-player" />4.2 常见问题解决方案
在实际使用中可能会遇到一些问题，这里分享几个常见问题的解决方法：
视频封面不显示：确保poster属性设置正确，或者使用视频第一帧作为封面。我们在代码中实现了自动截取第一帧作为封面的功能。
视频无法自动播放：由于浏览器限制，大多数情况下需要用户交互后才能自动播放。可以添加muted属性来提高自动播放成功率。
全屏问题：如果需要全屏功能，可以调用videoElement.requestFullscreen()方法，但要注意各浏览器的兼容性。
跨域问题：如果视频资源在不同域名下，确保服务器配置了正确的CORS头信息。
5. 性能优化与进阶技巧
5.1 内存管理与性能优化
视频组件是比较消耗资源的，需要特别注意内存管理：
及时清除事件监听器：在组件销毁前，一定要移除所有添加的事件监听，避免内存泄漏。
合理使用定时器：播放进度更新的定时器要及时清除，我们在代码中已经做了处理。
视频预加载：可以根据需要设置preload属性，平衡首屏性能和播放流畅度。
5.2 高级功能扩展
基于这个封装方案，可以轻松实现更多高级功能：
倍速播放：通过设置video.playbackRate属性实现，支持任意倍速。
画中画模式：现代浏览器支持requestPictureInPicture()API。
自定义控制条：完全隐藏原生控制条，用HTML/CSS实现自定义UI。
字幕支持：通过track标签添加字幕支持。
多清晰度切换：动态修改src属性实现清晰度切换。
在实际项目中，我们根据业务需求对这些功能进行了灵活组合，效果非常好。特别是在教育类应用中，倍速播放和字幕支持非常实用。