微信小程序的媒体组件

mini..2024-06-25 9:59

微信小程序中的媒体组件主要包括音频组件和视频组件，它们可以帮助开发者在小程序中嵌入和播放多媒体内容。以下是对这两个组件的详细介绍：

音频组件
组件用于在小程序中播放音频文件。它支持多种配置选项和事件处理。

属性

src: 音频资源的 URL 地址。

controls: 是否显示默认控件（播放、暂停、音量等）。

autoplay: 是否自动播放。

loop: 是否循环播放。

muted: 是否静音播放。

initial-time: 音频开始播放的初始位置，单位为秒。

id: 音频组件的唯一标识符。

poster: 音频封面图 URL。

事件

bindplay: 当音频开始或继续播放时触发。

bindpause: 当音频暂停时触发。

bindended: 当音频播放至结束时触发。

bindtimeupdate: 播放进度变化时触发，触发频率约为 250ms 一次。

binderror: 音频播放发生错误时触发。

示例代码

html 复制代码

<audio 
  src="https://example.com/audio.mp3" 
  controls 
  autoplay 
  loop 
  poster="https://example.com/poster.jpg"
  bindplay="onPlay"
  bindpause="onPause"
  bindended="onEnded"
/>

视频组件
组件用于在小程序中播放视频文件，同样支持丰富的配置选项和事件处理。

属性

src: 视频资源的 URL 地址。

controls: 是否显示默认控件（播放、暂停、全屏等）。

autoplay: 是否自动播放。

loop: 是否循环播放。

muted: 是否静音播放。

initial-time: 视频开始播放的初始位置，单位为秒。

poster: 视频封面图 URL。

object-fit: 视频对齐方式，可选值有 contain, fill, cover。

play-btn-position: 播放按钮的位置，可选值有 bottom, center。

danmu-btn: 是否显示弹幕按钮，默认值为 false。

danmu-list: 弹幕列表。

enable-danmu: 是否展示弹幕，默认值为 false。

事件

bindplay: 当视频开始或继续播放时触发。

bindpause: 当视频暂停时触发。

bindended: 当视频播放至结束时触发。

bindtimeupdate: 播放进度变化时触发，触发频率约为 250ms 一次。

bindfullscreenchange: 全屏切换时触发。

binderror: 视频播放发生错误时触发。

示例代码

html 复制代码

<video 
  src="https://example.com/video.mp4" 
  controls 
  autoplay 
  loop 
  poster="https://example.com/poster.jpg"
  object-fit="contain"
  bindplay="onPlay"
  bindpause="onPause"
  bindended="onEnded"
  bindfullscreenchange="onFullscreenChange"
  binderror="onError"
/>