预览图片、视频

553 阅读1分钟

1、图片预览

uni.previewImage({
					
                       current: image_index,
		       urls: imageList
                });

current为必填项,如果不填可能会报错。image_index为传入的图片索引值,imageList为图片列表。

2、点击图片封面,全屏播放视频

<view v-if="post.type == 2" style="width: 500rpx;height: 500rpx;position: relative;"
							@click.stop="sjxq(index)"
		<image class="gallery_img" :lazy-load="true" mode="aspectFill":src="post.vodPic || kongimg"></image>
							<image class="list-absolutt" src="../../static/user/playup.png" mode=""></image>
						</view>
                                                
               <view v-if="trunup">
			<video @fullscreenchange="fullscreenchange" :autoplay="false" id="myVideo" :src="videoSrc"></video>
		</view>                    

uni.createVideoContext

创建并返回video的上下文VideoContext

image.png

onReady(){
       this.videoContext = uni.createVideoContext('myVideo')       //myVideo为video的id
       }
       
       
                                 //点击封面图片方法sjxq()
sjxq(index) {
				// 获取 video 上下文 videoContext 对象
				console.log(index)
				this.videoSrc = this.dataList[index].playUrl;

				// 进入全屏状态
				this.videoContext.requestFullScreen({
					direction: 0                           //设置全屏时视频的方向
				});
				this.trunup = true
				setTimeout(()=>{
					// 进入全屏状态
					this.videoContext.requestFullScreen({
						direction: 0
					});
					this.videoContext.play();
				},500)
			},
                   
fullscreenchange(e) {
				console.log(e)
				if (!e.detail.fullScreen) {
					this.videoContext.pause()
					this.showvideo = false
					this.trunup = false
				}
			},

关于视频播放屏幕的自适应