uniapp 电商app 商品详情页视频播放层级最高的处理方法

柔情只为你懂 2021-07-25 18:07 1056阅读 0赞

## uniapp 电商app商品详情页视频播放 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
类似于上图的这种形式，商品视频是可以播放展示的。  
但是由于uniapp中的video组件的坑，导致视频永远在第一层，如果是商品轮播图中是视频与图片的集合，则视频永远都是在最上层，左右切换时是看不到图片的。

最终的解决方法就是：  
在商品详情页面中还是图片的集合，在视频部分，是底图+播放按钮的组合。  
当点击此部分进行视频播放时，将视频全屏播放，只有当视频退出全屏播放时，再显示为图片。

部分代码如下：

遍历detail.meddias这个数组，里面可以渲染所有的图片或者视频。  
数组中有个参数：mediaType，如果参数为0，则为图片，否则为视频。  
视频的展示方式是：图片+播放按钮的形式。

点击视频封面图时，触发的函数如下：

toPlayVideo(url){ 
    	this.videoUrl = url;
    	setTimeout(()=>{ 
    		this.videoContext = uni.createVideoContext('myVideo');
    		this.videoContext.requestFullScreen({  direction: 0 });
    		this.videoContext.play();
    	},100)
    }

此处的videoUrl就是视频的播放链接，这个链接如果有内容，则全屏播放视频，如果没有内容，则隐藏。  
video组件的代码如下：

video组件全屏展示的话,style样式应该是position:fixed;top:0;left:0;这样就全屏展示了。  
v-show用于判断video组件的显示与隐藏，如果有视频链接则展示，如果没有则不展示。  
id:myVideo，id可以用来确定视频组件的唯一性。  
@fullscreenchange 监听video是否全屏，如果参数为true,则为全屏，否则不为全屏。  
object-fit:视频的展示形式，contain保证视频能够展示全，展示不全的部分黑色底展示。  
src:指定的video组件的视频链接。

监听视频全屏的触发函数：

changeFull(e){ 
    	if(!e.detail.fullScreen){ 
    		this.videoContext.stop();
    		this.videoUrl = false;
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/b5e945b1d30a41bcb831aabb30dc6f6d.png