uni-app加密视频嵌入页面播放 4种方案对比 仅一种接近完美
开篇：一个看似简单的需求
产品经理提了一个需求：「课程详情页顶部的 banner 图换成视频播放器吧，让用户能在页面内直接观看。」
听起来非常简单对吧？加一个 标签就能搞定。
但我们的视频采用了阿里云私有加密，播放器必须是阿里云 Web SDK → 只能运行在 WebView 中 → uni-app 的
于是陷入了一个死锁困境：加密 → 必须用 WebView → WebView 必须全屏 → 无法实现页面内嵌。
本文完整记录了我们在分析该问题时的全过程，并提供了 4 种可行方案的详细对比。如果你也在开发视频类 App，大概率会遇到类似的挑战。
一、先回答两个核心问题
在讨论具体方案之前，需要先厘清两个关键问题：
问题 1：WebView 能嵌入页面的某一部分吗？
App 端（APP-PLUS）：不能。
uni-app 的
| 限制 | 说明 |
|---|---|
| 层级覆盖 | web-view 浮于所有页面元素之上，z-index 完全无效 |
| 不跟随滚动 | 无法放入 scroll-view 内参与滚动交互 |
| 宽度不可控 | webview-styles 仅支持 top/height/bottom，不支持 left/width，始终占满屏幕宽度 |
| 交互冲突 | 会遮挡下方的 tab 切换、卡片、底部操作栏等所有元素 |
| 显示切换开销大 | 只能用 v-if 销毁和重建，v-show 无效 |
因此我们项目中现有的 player.vue（全屏 WebView 播放）已经是正确做法。想把它缩小到 banner 区域？在 App 端是行不通的。
H5 端：可以。 使用