博客站

在 UniApp 中，视频播放是许多应用的核心需求之一。UniApp 提供了 video 组件和 uni.createVideoContext API 来实现视频播放功能。以下是 UniApp 处理视频播放的详细步骤：

一、使用 video 组件

video 组件是 UniApp 提供的视频播放组件，支持播放本地和网络视频。

1. 基本用法

• 示例：

  <template>
    <video
      src="https://example.com/video.mp4"
      controls
      autoplay
      style="width: 100%; height: 300px;"
    ></video>
  </template>
  

2. 设置视频属性

• 通过 controls、autoplay、loop 等属性设置视频播放行为。
• 示例：

  <video
    src="https://example.com/video.mp4"
    controls
    autoplay
    loop
    muted
    style="width: 100%; height: 300px;"
  ></video>
  

3. 监听视频事件

• 通过 @play、@pause、@ended 等事件监听视频播放状态。
• 示例：

  <template>
    <video
      src="https://example.com/video.mp4"
      controls
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
      style="width: 100%; height: 300px;"
    ></video>
  </template>
  
  <script>
  export default {
    methods: {
      onPlay() {
        console.log('视频开始播放');
      },
      onPause() {
        console.log('视频暂停');
      },
      onEnded() {
        console.log('视频播放结束');
      }
    }
  };
  </script>
  

二、使用 uni.createVideoContext

uni.createVideoContext 用于创建视频上下文，可以通过 JavaScript 控制视频播放。

1. 创建视频上下文

• 示例：

  <template>
    <video
      id="myVideo"
      src="https://example.com/video.mp4"
      style="width: 100%; height: 300px;"
    ></video>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
  </template>
  
  <script>
  export default {
    methods: {
      play() {
        this.videoContext.play();
      },
      pause() {
        this.videoContext.pause();
      }
    },
    mounted() {
      this.videoContext = uni.createVideoContext('myVideo');
    }
  };
  </script>
  

2. 控制视频播放

• 通过 play、pause、seek 等方法控制视频播放。
• 示例：

  this.videoContext.play(); // 播放
  this.videoContext.pause(); // 暂停
  this.videoContext.seek(10); // 跳转到第 10 秒
  

3. 监听视频事件

• 通过 onPlay、onPause、onEnded 等方法监听视频播放状态。
• 示例：

  this.videoContext.onPlay(() => {
    console.log('视频开始播放');
  });
  
  this.videoContext.onPause(() => {
    console.log('视频暂停');
  });
  
  this.videoContext.onEnded(() => {
    console.log('视频播放结束');
  });
  

三、处理全屏播放

1. 进入全屏

• 通过 requestFullScreen 方法进入全屏播放。
• 示例：

  this.videoContext.requestFullScreen();
  

2. 退出全屏

• 通过 exitFullScreen 方法退出全屏播放。
• 示例：

  this.videoContext.exitFullScreen();
  

3. 监听全屏事件

• 通过 onFullscreenChange 方法监听全屏状态变化。
• 示例：

  this.videoContext.onFullscreenChange((res) => {
    console.log('全屏状态变化：', res.fullScreen);
  });
  

四、总结

UniApp 处理视频播放的步骤如下：

1. 使用 video 组件：通过 video 组件实现视频播放。
2. 使用 uni.createVideoContext：通过 uni.createVideoContext API 控制视频播放。
3. 处理全屏播放：通过 requestFullScreen 和 exitFullScreen 方法控制全屏播放。

以下是一个完整的视频播放示例：

<template>
  <video
    id="myVideo"
    src="https://example.com/video.mp4"
    controls
    @play="onPlay"
    @pause="onPause"
    @ended="onEnded"
    style="width: 100%; height: 300px;"
  ></video>
  <button @click="play">播放</button>
  <button @click="pause">暂停</button>
  <button @click="seek">跳转到第 10 秒</button>
  <button @click="requestFullScreen">进入全屏</button>
  <button @click="exitFullScreen">退出全屏</button>
</template>

<script>
export default {
  methods: {
    play() {
      this.videoContext.play();
    },
    pause() {
      this.videoContext.pause();
    },
    seek() {
      this.videoContext.seek(10);
    },
    requestFullScreen() {
      this.videoContext.requestFullScreen();
    },
    exitFullScreen() {
      this.videoContext.exitFullScreen();
    },
    onPlay() {
      console.log('视频开始播放');
    },
    onPause() {
      console.log('视频暂停');
    },
    onEnded() {
      console.log('视频播放结束');
    }
  },
  mounted() {
    this.videoContext = uni.createVideoContext('myVideo');
    this.videoContext.onFullscreenChange((res) => {
      console.log('全屏状态变化：', res.fullScreen);
    });
  }
};
</script>

通过合理使用这些方法，可以轻松实现 UniApp 中的视频播放功能，满足应用的需求。