uniapp 的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()方法来关闭小窗模式。

相关阅读:
使用易备数据备份软件，简单快速地备份 Oracle 数据库
云vscode搭建--使用容器化部署
工业蒸汽量预测（速通三）
Windows平台下C++五子棋项目实战开发
Android 12 intent-filter添加android:exported后任然报错解决方法
你知道企业到什么阶段必须数字化转型吗？
LangChain实战技巧之五：让模型“自动生成”Prompt（提示词）的两种方式
es6和commonjs对导入导出的值修改是否影响原模块
Kafka分区策略
Flutter 数据存储--shared_preferences使用详情

原文地址：https://blog.csdn.net/m0_71966801/article/details/132523520