uniapp 视频小窗切换如何实现

在uniapp中如何实现视频小窗切换功能？当从全屏播放切换到小窗模式时，视频需要继续播放且位置固定，类似悬浮窗效果。目前尝试过使用cover-view和调整样式，但小窗位置会随页面滚动而移动。请问有没有成熟的解决方案或组件推荐？最好能兼容H5和APP端。

2 回复

在uniapp中，实现视频小窗切换可使用<video>组件的picture-in-picture模式。设置picture-in-picture-mode属性为['push', 'pop']，通过@pipmodechange监听切换事件。也可用uni.createVideoContext控制播放器，结合CSS定位实现自定义小窗。


在 UniApp 中实现视频小窗切换（画中画模式），可以通过以下步骤实现：

核心思路

使用 uni.createVideoContext 控制视频播放器，结合 CSS 样式动态调整视频窗口位置和大小。

实现步骤

  1. 创建视频组件
    在页面中添加 <video> 组件，并设置 id。

    <video 
  id="myVideo" 
  src="https://example.com/sample.mp4" 
  controls 
  :style="videoStyle"
></video>

  2. 控制视频状态
    使用 uni.createVideoContext 获取视频实例，控制播放/暂停。

    export default {
  data() {
    return {
      videoContext: null,
      isMiniWindow: false, // 是否小窗模式
      videoStyle: {
        width: '100%',
        height: '400rpx',
        position: 'fixed',
        bottom: '0',
        right: '0',
        zIndex: 999
      }
    }
  },
  onReady() {
    this.videoContext = uni.createVideoContext('myVideo')
  },
  methods: {
    // 切换小窗/全屏
    toggleMiniWindow() {
      this.isMiniWindow = !this.isMiniWindow
      if (this.isMiniWindow) {
        // 小窗样式
        this.videoStyle = {
          width: '200rpx',
          height: '150rpx',
          position: 'fixed',
          bottom: '100rpx',
          right: '20rpx',
          zIndex: 999
        }
      } else {
        // 全屏样式
        this.videoStyle = {
          width: '100%',
          height: '400rpx'
        }
      }
    },
    // 播放视频
    playVideo() {
      this.videoContext.play()
    }
  }
}

  3. 添加切换按钮
    在页面放置切换按钮：

    <button [@click](/user/click)="toggleMiniWindow">切换小窗</button>
<button [@click](/user/click)="playVideo">播放</button>

注意事项

  • 平台差异：H5 和 App 端支持较好，小程序端可能受平台限制（如微信小程序需特定配置）。
  • 层级管理：小窗模式下注意 z-index 设置，避免被其他元素遮挡。
  • 手势操作：可添加拖拽功能（需通过 touch 事件计算位置）。

扩展建议

如需更复杂功能（如拖拽移动），可结合 @touchstart、@touchmove 事件动态计算视频位置。

以上方案通过样式切换实现基础小窗效果，代码简洁且跨平台兼容性较好。

回到顶部