uniapp 的video播放如何实现小窗功能

最新推荐文章于 2025-03-16 12:37:00 发布

代码真的养发

最新推荐文章于 2025-03-16 12:37:00 发布

阅读量1.7k

点赞数 4

文章标签： uni-app 前端

本文链接：https://blog.csdn.net/m0_71966801/article/details/132523520

版权

在页面中使用<video>组件来展示视频，并设置好相应的属性和事件监听：
```
<video src="video.mp4" @play="onVideoPlay" @pause="onVideoPause"></video>
```
在页面的data中定义一个变量来表示是否开启小窗模式，例如isPictureInPicture：
```
data() {
  return {
    isPictureInPicture: false
  };
},
```

在methods中编写对应的事件处理方法，在需要开启小窗模式时，通过uni-app提供的API来实现：

methods: {
  onVideoPlay() {
    // 当视频开始播放时，判断是否需要开启小窗模式
    if (this.isPictureInPicture) {
      uni.createVideoPlayer({
        videoId: 'video-player',
        sources: [{
          src: 'video.mp4'
        }],
        autoplay: true,
        showFullscreenBtn: false,
        showCenterPlayBtn: false,
        showPlayBtn: false,
        pictureInPictureMode: true
      });
    }
  },
  onVideoPause() {
    // 当视频暂停时，关闭小窗模式
    if (this.isPictureInPicture) {
      uni.exitPictureInPicture();
    }
  }
}

在上述代码中，当视频开始播放时，判断isPictureInPicture是否为true，如果是，则调用uni.createVideoPlayer()方法创建一个视频播放器，并传入相应的参数来开启小窗模式。当视频暂停时，调用uni.exitPictureInPicture()方法来关闭小窗模式。