解决 Uniapp 中 App 端 video 元素层级过高的问题

在 Uniapp 开发中，使用 video 组件时，可能会遇到 video 元素层级过高的问题，导致其覆盖其他元素（如弹窗、导航栏等）。

1. 问题描述

在 Uniapp 的 App 端，video 组件默认会以原生组件的形式渲染，其层级较高，可能覆盖页面中的其他元素。即使通过 z-index 调整层级，也无法完全解决这一问题。

---

​2. 解决方案

通过富文本渲染 video 标签元素，可以避免 video 组件层级过高的问题。具体实现步骤如下：

​2.1 使用 u-parse 渲染 video 标签

u-parse 是 uView 组件库中的一个富文本解析器，支持渲染 HTML 标签。我们可以通过 u-parse 渲染 video 标签，从而替代原生 video 组件。

​2.2 实现步骤

1. ​定义 video 标签的 HTML 字符串
   在方法中返回 video 标签的 HTML 字符串：

   methods: {
     getVideoHtml(src) {
       return `<video src="${src}" class="videos" controls></video>`;
     }
   }

2. ​使用 u-parse 渲染 video 标签
   在模板中使用 u-parse 渲染 video 标签：

   <view class="video-box">
     <u-parse :content="getVideoHtml(item.title)"></u-parse>
   </view>

3. ​通过样式穿透修改 video 标签样式
   由于 u-parse 渲染的 video 标签位于 iframe 中，需要通过样式穿透修改其样式：

   .video-box {
     position: relative;
     width: 100%;
     height: 200px;
   }
   
   .video-box >>> .videos {
     width: 100%;
     height: 100%;
     object-fit: cover;
   }

---

​3. 完整代码示例

以下是一个完整的代码示例，展示了如何在 Uniapp 中使用富文本渲染 video 标签：

<template>
  <view class="video-box">
    <u-parse :content="getVideoHtml(item.title)"></u-parse>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {
        title: 'https://www.example.com/video.mp4' // 视频地址
      }
    };
  },
  methods: {
    getVideoHtml(src) {
      return `<video src="${src}" class="videos" controls></video>`;
    }
  }
};
</script>

<style scoped>
.video-box {
  position: relative;
  width: 100%;
  height: 200px;
}

.video-box >>> .videos {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

---

​4. 注意事项

1. ​样式穿透

   • 由于 u-parse 渲染的 video 标签位于 iframe 中，必须使用样式穿透（>>> 或 /deep/）修改其样式。

2. ​兼容性

   • 该方案适用于 App 端和 H5 端，但在小程序端可能无法使用 u-parse 渲染 video 标签。

3. ​性能优化

   • 如果页面中包含多个 video 标签，需注意性能问题，避免同时加载多个视频。