播放视频的video组件-微信小程序与云开发(上)

当前位置:　首页>> 技术小册>> 微信小程序与云开发(上)

### 播放视频的video组件

在微信小程序中，`video` 组件是用于播放视频内容的强大工具，它支持多种格式的视频文件，包括 MP4、M4V、MOV、AVI、FLV、WEBM 等，同时提供了丰富的控制接口和属性，以满足不同场景下的视频播放需求。本章将详细介绍 `video` 组件的基本使用、属性配置、事件监听以及结合云开发实现视频上传与播放的高级应用。

#### 一、video组件基础

##### 1.1 组件引入

在小程序的 `.wxml` 文件中，直接通过 `<video>` 标签引入视频组件。无需额外导入，因为它是微信小程序的基础组件之一。

```html
<video src="视频资源地址" controls></video>
```

其中，`src` 属性指定视频文件的地址，可以是网络地址也可以是本地资源路径（如：`/path/to/video.mp4`）。`controls` 属性是一个布尔值，用于控制是否显示默认播放控件，包括播放/暂停按钮、播放进度、音量控制等。

##### 1.2 基本属性

`video` 组件提供了多个属性用于定制视频播放的行为和样式：

- `id`：视频组件的唯一标识符，用于在 JavaScript 中引用。
- `src`：视频资源的地址。
- `controls`：是否显示默认播放控件，默认为 `false`。
- `autoplay`：是否自动播放，默认为 `false`。注意，由于自动播放可能带来用户体验问题，部分浏览器或平台可能限制或禁止自动播放。
- `muted`：是否静音播放，默认为 `false`。
- `loop`：是否循环播放，默认为 `false`。
- `objectFit`：当视频大小与容器不一致时，视频如何适应容器的方式，如 `contain`、`fill`、`cover` 等。
- `danmu-list`：弹幕列表，用于显示弹幕，但需注意，小程序对弹幕的支持有限，需根据平台政策调整。
- `danmu-btn`：是否显示弹幕按钮，默认为 `false`。
- `enable-danmu`：是否展示弹幕，与 `danmu-list` 和 `danmu-btn` 配合使用。

##### 1.3 常用事件

`video` 组件提供了多个事件监听，以便开发者在视频播放的不同阶段执行自定义逻辑：

- `bindplay`：当开始/继续播放时触发。
- `bindpause`：当暂停播放时触发。
- `bindended`：当播放到末尾时触发。
- `bindtimeupdate`：播放进度变化时触发，频率大约为每秒一次。
- `binderror`：视频播放出错时触发。

#### 二、高级应用

##### 2.1 自定义播放控件

虽然 `video` 组件提供了默认的播放控件，但在某些场景下，我们可能需要自定义播放控件以更好地融入页面设计。这时，可以将 `controls` 属性设置为 `false`，并通过监听 `video` 组件的事件（如 `bindplay`、`bindpause` 等）来控制自定义控件的行为。

```html
<video id="myVideo" src="{{videoSrc}}" autoplay="false" controls="false" bindplay="onVideoPlay" bindpause="onVideoPause"></video>
<button bindtap="playVideo">播放</button>
<button bindtap="pauseVideo">暂停</button>
```

在 JavaScript 中，通过调用 `this.createVideoContext('myVideo')` 获取视频上下文，进而控制视频的播放、暂停等。

##### 2.2 视频云存储与播放

结合微信小程序的云开发能力，可以轻松实现视频文件的上传与存储，并通过云存储提供的 CDN 加速功能提升视频播放的流畅度。

- **上传视频**：使用云开发的数据库和云存储功能，首先在小程序端选择视频文件，然后通过云函数将视频上传到云存储中，并保存视频的下载链接到数据库中。
- **播放视频**：在需要播放视频的地方，从数据库中查询视频链接，并赋值给 `video` 组件的 `src` 属性进行播放。

示例云函数（假设使用 Node.js 环境）上传视频的代码片段：

```javascript
// 云函数 uploadVideo
const cloud = require('wx-server-sdk')
cloud.init()

exports.main = async (event, context) => {
  const fileID = event.fileID // 前端传入的临时文件ID
  try {
    const result = await cloud.uploadFile({
      cloudPath: 'videos/' + new Date().getTime() + '_' + Math.random().toString(36).substr(2, 10) + '.mp4', // 云端路径
      fileContent: cloud.getTempFileStream(fileID), // 临时文件流
      success: res => {
        // 返回文件ID
        return res.fileID
      },
      fail: console.error
    })
    return result.fileID
  } catch (err) {
    return err
  }
}
```

#### 三、优化与注意事项

##### 3.1 加载优化

- **预加载**：对于重要视频内容，可以在页面加载时预加载视频，减少用户点击播放时的等待时间。
- **懒加载**：对于非核心或长列表中的视频，采用懒加载策略，即用户滑动到视频位置时才开始加载。

##### 3.2 性能优化

- **选择合适的编码和分辨率**：根据目标设备和网络状况，选择合适的视频编码和分辨率，避免不必要的性能消耗。
- **缓存策略**：合理利用缓存，减少重复加载相同视频的次数。

##### 3.3 用户体验

- **提供清晰的播放控制**：确保用户能够轻松控制视频的播放、暂停、音量等。
- **错误处理**：优雅地处理视频加载失败或播放错误的情况，如显示错误提示、重试按钮等。

#### 四、总结

微信小程序中的 `video` 组件为开发者提供了丰富的视频播放功能，通过合理的配置和高级应用，可以实现高质量的视频播放体验。结合云开发能力，更是能够轻松实现视频内容的上传、存储与分发，为小程序增色不少。在实际开发过程中，应注意性能优化和用户体验，确保视频内容能够流畅、稳定地展示给用户。

该分类下的相关小册推荐：

微信小程序底层框架实现原理

微信小程序全栈开发实战(上)

微信小程序全栈开发实战(下)

微信小程序与云开发(中)

微信小程序与云开发(下)

微信小程序全栈开发实战(中)