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

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

播放视频的video组件

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

一、video组件基础

1.1 组件引入

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

<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 等）来控制自定义控件的行为。

<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 环境）上传视频的代码片段：

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