uni-app 视频播放遇到的问题-video

最近开发一个项目，一个视频列表，点击其中一个视频，全屏播放（像大屏预览似的全屏），图上覆盖截图，全屏和回放图标。

本文涉及到的知识点：

1。视频播放video组件使用；

2。图片下载uni.downloadFile；

3。上拉加载，下拉刷新

4。subNVue；

5。父子组件传值

弹出的全屏窗口：

videoTest.vue

video.nvue

横竖屏方向：

“orientation” : [
        //竖屏正方向
        “portrait-primary”,
        //竖屏反方向
        “portrait-secondary”,
        //横屏正方向
        “landscape-primary”,
        //横屏反方向
        “landscape-secondary”,
        //自然方向
        “default”
]

视频列表页：

列表中做了两种处理：

1。有视频时显示视频，并显示封面，但点击视频时，并不触发播放，是弹出全屏页面，在全屏页面进行全屏，截图等操作；这种处理需要用subNVue特殊处理一下弹出框，要不然弹出框会被视频遮挡。

2。另一种处理是不管有没有视频，都显示图片，有视频的图片给它显示播放按钮和截屏按钮，但点击图片时，仍然会弹出全屏页面。被注释掉的代码就是只显示图片的处理。

video层级过高，导致弹窗显示在底层，解决方法：

{
			"path": "pages/netcheck/NetCheckList",
			"style": {
				"navigationBarTitleText": "远程巡店",
				"enablePullDownRefresh":true,//下拉刷新配置
				"app-plus": {
					"pullToRefresh": {
						"style":"circle",
						"offset": "88px"
					},
					"subNVues":[{  
						"id": "netDialog", // 唯一标识  
						"path": "pages/netcheck/subNVue/DialogNet", // 页面路径  
						"type": "popup",  //原生子窗口内置样式，可取值：'popup',弹出层；"navigationBar",导航栏
						"style": {  
							"position":"fixed",
							// "height": "60px",
							// "top":"40px",
							// "top":"40%",
							"background":"transparent"
						}  
					}]  
				}
			}
		},

DialogNet.vue

注意：

（1）subNVue弹窗的显示，只能使用js的show方法，无法携带参数。

（2）参数传递使用uni.$emit和uni.$on