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

前端开发 同时被 2 个专栏收录
3 篇文章 0 订阅
2 篇文章 0 订阅

解决方式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>'

    }
}
				

  • 5
    点赞
  • 6
    评论
  • 7
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页

打赏作者

小宝&

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值