uniapp video app端层级过高的问题，滑动渲染问题。

最新推荐文章于 2025-03-11 13:55:10 发布

小宝&

最新推荐文章于 2025-03-11 13:55:10 发布

阅读量4.4k

点赞数 12

分类专栏：前端开发 vue 文章标签： uniapp vue video app

本文链接：https://blog.youkuaiyun.com/qq_41780372/article/details/119114009

版权

前端开发同时被 2 个专栏收录

4 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍了在不支持原生视频组件的情况下，采用H5视频播放作为替代方案的过程。该方案虽然在性能上略逊于原生组件，但能较好地满足自定义导航及按钮的需求，并实现了全屏、静音等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方式1：使用nvue编写界面，但是界面引入部分ui框架不支持

解决方案2：subnvue

解决方案3：使用h5 video.

本人采用的第三种方案，比较方便也满足需求。但是性能和体验方面不如方案1，而方案二的话没有测，但是个人猜想只是能修改层级，但是滑动的时候video组件渲染问题感觉还是会有。

因为本人在视频上方还有一些按钮，然后导航也是自定义导航，所以如果采用方案二这些都要处理，方案三的话目前来看能满足自己的需求。另外全屏静音等按钮也正常。

方案三核心代码

<view style="height: 750rpx;">
	<view v-html="html" style="height: 750rpx;width: 750rpx;"></view>
</view>

data() {
	return {
		html:'<video muted controlslist="nodownload"	controls="controls"   src="https://cloud.video.taobao.com/play/u/1818112330/p/2/e/6/t/1/284416583177.mp4?appKey=38829"   style="height:100%"  autoplay="autoplay" poster="https://img.alicdn.com/imgextra/i1/2825989823/O1CN01sgPdZ22MQzAJ2GJAx_!!2825989823.jpg" webkit-playsinline="" playsinline="" ></video>'

    }
}