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
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
}
},