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

推荐答案

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

-- -------------------- ---- -------
------
  ------------------------------------
  --------
  --------
  ----
  -----
  ---------------------------------------
  -----------------
  -------------------
  -------------------
  -------------------
--

本题详细解读

1. video 组件的基本属性

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

2. 事件绑定

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

3. 示例代码解析

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

4. 事件处理函数示例

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