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