如何使用 video 组件播放视频？

推荐答案

在微信小程序中使用 video 组件播放视频的代码如下：

// www.javascriptcn.com code example
<video
  src="https://example.com/sample.mp4"
  controls
  autoplay
  loop
  muted
  poster="https://example.com/poster.jpg"
  bindplay="onPlay"
  bindpause="onPause"
  binderror="onError"
  bindended="onEnded"
/>

本题详细解读

1. video 组件的基本属性

• src: 视频资源的地址，可以是本地路径或网络 URL。
• controls: 是否显示默认播放控件（如播放/暂停按钮、进度条等）。
• autoplay: 是否自动播放视频。
• loop: 是否循环播放视频。
• muted: 是否静音播放视频。
• poster: 视频封面图片的 URL，在视频未播放时显示。

2. 事件绑定

• bindplay: 当视频开始播放时触发。
• bindpause: 当视频暂停时触发。
• binderror: 当视频播放出错时触发。
• bindended: 当视频播放结束时触发。

3. 示例代码解析

// www.javascriptcn.com code example
<video
  src="https://example.com/sample.mp4"
  controls
  autoplay
  loop
  muted
  poster="https://example.com/poster.jpg"
  bindplay="onPlay"
  bindpause="onPause"
  binderror="onError"
  bindended="onEnded"
/>

• src 指定了视频的 URL 地址。
• controls 设置为 true，显示播放控件。
• autoplay 设置为 true，视频加载后自动播放。
• loop 设置为 true，视频播放结束后自动重新开始。
• muted 设置为 true，视频播放时静音。
• poster 设置了视频的封面图片。
• bindplay、bindpause、binderror、bindended 分别绑定了对应的事件处理函数。

4. 事件处理函数示例

// www.javascriptcn.com code example
Page({
  onPlay: function() {
    console.log('视频开始播放');
  },
  onPause: function() {
    console.log('视频暂停');
  },
  onError: function() {
    console.log('视频播放出错');
  },
  onEnded: function() {
    console.log('视频播放结束');
  }
});

• onPlay 函数在视频开始播放时调用。
• onPause 函数在视频暂停时调用。
• onError 函数在视频播放出错时调用。
• onEnded 函数在视频播放结束时调用。