uniapp中video层级太高解决方案，适用安卓/IOS/H5

• 移动开发

最近项目中遇到这样的一个问题，uniapp视频播放组件在h5上面上可正常使用，但在打包成app（安卓/IOS）时，发现了Video组件层级太高或者在页面中不跟随页面滚动等问题。

官方给出的方案比较繁琐复杂，因此自己写了一个简单粗暴的组件，利用iframe实现
1.我们直接新建一个nVideo.vue的组件
2.在需要使用的地方直接引入使用这个组件，只需传src视频地址进来即可

话不多说，直接上代码

	


	export default {
		props: {
			src: {}
		},
		data() {
			return {
				onloadCode: ''
			}
		},
		created() {
			this.onloadCode =
				`this.contentWindow.document.body.innerHTML = '<video  controls="controls" src="${this.src}">';`
		},
	}

直接在需要用到的地方引入使用即可

import nVideo from '@/components/nVideo.vue'

使用频率高的话可全局注册,在main.js里面引入注册

import nVideo from '@/components/nVideo.vue'
Vue.component('nVideo', nVideo)

大小样式等根据自己项目去调整


                                                        
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/a97418795e.html
                        

                        

                            

                            

                                
 赞 (0)


                                                            


                            

                                

                                                                        

                                        

                                                                                                                                                                            

                                        
                                        

                                            
                                        

                                    

                                

                            


                            

                                                                    

                                        
                                        

                                            « 上一篇
                                            1天前
                                        

                                    

                                                                                                    

                                        
                                        

                                            下一篇  »
                                            1天前
                                        

                                    

                                                            

                                                        
相关推荐