uniapp video 加载完成后全屏播放

coldriversnow2025-10-25 10:54

在 UniApp 中实现视频加载完成后全屏播放，可以通过监听视频的 play 事件，并在该事件触发后调用视频的 requestFullScreen 方法来实现。以下是一个简单的示例步骤，展示如何在 UniApp 中实现这一功能：

1. 页面布局

首先，在你的页面中添加一个 <video> 组件，并设置一些基本的属性，比如 src（视频源地址）和 autoplay（自动播放，可选）。

复制代码

<template>
  <view>
    <video
      id="myVideo"
      :src="videoSrc"
      autoplay
      @play="onVideoPlay"
      @error="videoErrorCallback"
      style="width: 100%;"
    ></video>
  </view>
</template>

2. 脚本处理

在页面的 <script> 部分，你可以定义视频播放后的全屏处理逻辑。使用 ref 属性给 <video> 组件一个引用名，然后在方法中通过这个引用调用全屏方法。

复制代码

<script>
export default {
  data() {
    return {
      videoSrc: 'https://example.com/path/to/your/video.mp4' // 视频地址
    };
  },
  methods: {
    onVideoPlay() {
      this.$nextTick(() => {
        const video = uni.createVideoContext('myVideo', this);
        video.requestFullScreen({ direction: 0 }); // 全屏播放，direction: 0 表示自动选择横屏或竖屏
      });
    },
    videoErrorCallback: function(e) {
      console.error('video:' + e.target.errMsg);
    }
  }
};
</script>

requestFullScreen 方法在某些平台可能需要特定的权限或配置，特别是在微信小程序中，需要用户手动触发全屏（通常是通过点击事件）。在 UniApp 中，通常在视频播放后自动请求全屏是可行的。