uniapp app 视频列表点击某一个全屏播放
时间: 2023-08-28 09:06:24 浏览: 369
要实现在 Uniapp 中点击视频列表中的某一个视频后全屏播放,可以使用 Uniapp 自带的 video 组件。首先,在 video 组件上绑定一个点击事件,当用户点击某一个视频时触发该事件。然后,在事件处理函数中,获取该视频的 URL,创建一个新的页面或弹出一个浮层,将视频组件放在其中,设置视频的 URL 并将视频全屏播放。
以下是示例代码:
```
<template>
<view>
<scroll-view>
<view v-for="(video, index) in videoList" :key="index" @click="playVideo(video)">
// 显示视频封面图等信息
</view>
</scroll-view>
<video :src="currentVideoUrl" @play="onPlay"></video>
</view>
</template>
<script>
export default {
data() {
return {
videoList: [/* 视频列表 */],
currentVideoUrl: '' // 当前播放的视频 URL
}
},
methods: {
playVideo(video) {
this.currentVideoUrl = video.url; // 设置当前播放的视频 URL
// 创建新的页面或弹出浮层
},
onPlay() {
// 视频开始播放
}
}
}
</script>
```
阅读全文