uniapp video 全屏如何实现

在uniapp中，如何实现video组件的全屏播放功能？我尝试了默认的controls属性，但无法自定义全屏按钮的样式和行为。另外，在安卓和iOS平台上，全屏表现似乎不一致，有什么方法可以统一全屏效果吗？如果需要自定义全屏逻辑，应该怎么处理？

2 回复

在uniapp中，video组件全屏可通过设置fullscreen属性或调用videoContext.requestFullScreen()方法实现。


在 UniApp 中，实现视频全屏可以通过以下步骤完成：

1. 使用 video 组件

在页面中添加 video 组件，并设置相关属性：

<video 
  id="myVideo" 
  src="视频地址" 
  controls 
  @fullscreenchange="onFullscreenChange"
></video>

2. 通过按钮触发全屏

添加一个按钮，调用全屏方法：

<button @click="requestFullScreen">全屏播放</button>

3. 实现全屏方法

在 methods 中定义全屏函数：

methods: {
  requestFullScreen() {
    const videoContext = uni.createVideoContext('myVideo'); // 传入 video 的 id
    videoContext.requestFullScreen(); // 进入全屏
  },
  
  onFullscreenChange(e) {
    console.log('全屏状态变化:', e.detail.fullScreen);
    // 可以在这里处理全屏状态变化逻辑
  }
}

4. 退出全屏

退出全屏可以通过以下方式：

  • 自动检测用户操作（如按 ESC 键或设备返回键）
  • 程序控制退出：
videoContext.exitFullScreen();

注意事项：

  1. 确保 video 组件设置了 id 属性
  2. 全屏功能在部分安卓设备上可能需要用户手势触发
  3. 全屏状态变化可以通过 @fullscreenchange 事件监听
  4. H5 端全屏效果取决于浏览器支持情况

完整示例：

<template>
  <view>
    <video 
      id="mainVideo" 
      src="https://example.com/sample.mp4" 
      controls 
      @fullscreenchange="onFullscreenChange"
    ></video>
    <button @click="toggleFullScreen">切换全屏</button>
  </view>
</template>

<script>
export default {
  methods: {
    toggleFullScreen() {
      const videoContext = uni.createVideoContext('mainVideo');
      videoContext.requestFullScreen();
    },
    
    onFullscreenChange(e) {
      if (!e.detail.fullScreen) {
        // 退出全屏时的处理
        console.log('已退出全屏');
      }
    }
  }
}
</script>

这样就可以在 UniApp 中实现视频的全屏播放功能了。

回到顶部