uniapp 点击视频进行全屏播放,通过判断传入的id是否为同一个,是同一个则继续播放,否则先退出上一个全屏播放再进行这一个全屏播放
时间: 2024-02-20 14:59:49 浏览: 90
videojs 实现视频列表 点击播放下个视频功能
5星 · 资源好评率100%
您可以使用uni-app自带的视频组件,通过监听视频组件的fullscreenchange事件来实现您的需求。具体实现过程如下:
1. 在您的页面中引入视频组件,并定义一个变量用来记录当前正在全屏播放的视频的id。
```
<video :src="videoSrc" :id="videoId" @fullscreenchange="handleFullScreen"></video>
```
2. 在handleFullScreen方法中,判断当前视频是否为全屏状态。如果是全屏状态,且当前视频的id与记录的id不一致,则先退出上一个视频的全屏状态,再进行当前视频的全屏播放。
```
handleFullScreen(event) {
if (event.target.webkitDisplayingFullscreen) {
if (this.videoId !== this.currentVideoId) {
// 退出上一个视频的全屏状态
const video = document.getElementById(this.currentVideoId);
if (video) {
video.webkitExitFullscreen();
}
// 记录当前正在全屏播放的视频的id
this.currentVideoId = this.videoId;
}
} else {
// 退出当前视频的全屏状态时,清空记录的id
this.currentVideoId = null;
}
}
```
3. 在点击播放按钮时,设置当前视频的id和视频源,并触发视频组件的全屏播放。
```
playVideo(videoId, videoSrc) {
this.videoId = videoId;
this.videoSrc = videoSrc;
const video = document.getElementById(this.videoId);
if (video) {
video.webkitEnterFullscreen();
}
}
```
这样,您就可以实现点击视频进行全屏播放,并且自动判断是否需要退出上一个视频的全屏状态的功能了。
阅读全文