【愚公系列】《微信小程序与云开发从入门到实践》020-多媒体组件

原创

愚公搬代码

发布于 2025-01-17 21:01:36

7250

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在微信小程序的开发中，多媒体组件为应用增添了丰富的交互体验和视觉效果。无论是音频、视频，还是图片展示，这些多媒体元素不仅能够吸引用户的注意力，还能有效传达信息和情感。随着用户对内容质量和互动性的要求不断提高，掌握多媒体组件的使用显得尤为重要。

本篇文章将深入探讨微信小程序中的多媒体组件，详细介绍每种组件的特性、使用方法和最佳实践。我们将展示如何通过这些组件实现动态的内容展示，提升用户的参与感和体验，同时分享一些实用的开发技巧和注意事项。

无论你是刚入门的小程序开发者，还是希望提升应用功能的资深开发者，这篇文章都将为你提供有价值的见解与实用的代码示例。让我们一起探索微信小程序多媒体组件的魅力，打造出更加生动有趣的小程序吧！

🚀一、多媒体组件

所谓的多媒体，主要是指图片、音频、视频这类元素，这类多媒体元素本身涉及的技术可能比较复杂，但是在小程序中使用它们却非常简单。小程序开发框架中提供了非常多面向应用的多媒体组件对与多媒体有关的需求进行支持，包含图片、音视频、相机、直播等。

🔎1.渲染图像的 image 组件

image 是小程序中用来渲染图像的组件，首先来看它是如何使用的。在示例工程的 pages 文件夹下新建一组名为 imageDemo 的页面文件，在 imageDemo.wxml 中编写如下示例代码：

<!-- pages/imageDemo/imageDemo.wxml -->
<image style="width: 100%; height: 80px;" src="http://huishao.cc/img/head-img.png"></image>

直接运行代码，效果如图所示。

如上述代码所示，src 属性是用来设置 image 组件要加载的图片资源，这里使用了网络图片；如果小程序使用了云开发技术，src 也支持使用云文件的 ID，后面介绍云开发的时候会再详细讲解。image 组件支持的图片格式有 JPG、PNG、WEBP、SVG、GIF 等。image 组件可配置的属性如表所示。

image 组件的属性

属性名	类型	意义
src	字符串	设置图片资源的地址
mode	字符串	设置图片的裁剪和缩放模式
webp	布尔值	设置是否解析 `WEBP` 格式图片，默认为 `false`
lazy-load	布尔值	设置是否懒加载，如果设置为懒加载，则当 `image` 组件即将进入可视范围时才加载图片资源
show-menu-by-longpress	布尔值	设置长按是否弹出菜单栏
binderror	函数	当图片加载发生错误时回调的方法
bindload	函数	当图片加载完成时的回调方法，参数中会传入图片的真实宽度和高度

有两个属性需要再额外介绍一下。

第一是 mode 属性，mode 也是 image 组件非常重要的一个属性，其用来指定图片的裁剪和缩放模式，支持设置的值如表所示。

值	意义
scaleToFill	使用图片拉伸缩放到 `image` 组件所指定的大小，不会裁剪图片内容，但可能会变形长宽比，导致图片变形
aspectFit	在保持图片宽高比不变的情况下缩放，确保图片能够完整地显示在 `image` 组件内，但可能会导致 `image` 组件内的显示区域被留空
aspectFill	在保持图片宽高比不变的情况下填充，确保图片能够充满整个 `image` 组件，但可能会裁剪图片内容
widthFix	在保持图片宽高比不变的情况下，调整图片的宽度，使 `image` 组件的宽度一致
heightFix	在保持图片宽高比不变的情况下，调整图片的高度，使 `image` 组件的高度一致
top	不缩放图片，当图片尺寸大于组件尺寸时，优先显示图片的顶部区域
bottom	不缩放图片，当图片尺寸大于组件尺寸时，优先显示图片的底部区域
center	不缩放图片，当图片尺寸大于组件尺寸时，优先显示图片的中间区域
left	不缩放图片，当图片尺寸大于组件尺寸时，优先显示图片的左侧区域
right	不缩放图片，当图片尺寸大于组件尺寸时，优先显示图片的右侧区域
top left	不缩放图片，当图片尺寸大于组件尺寸时，优先显示图片的左上角区域
top right	不缩放图片，当图片尺寸大于组件尺寸时，优先显示图片的右上角区域
bottom left	不缩放图片，当图片尺寸大于组件尺寸时，优先显示图片的左下角区域
bottom right	不缩放图片，当图片尺寸大于组件尺寸时，优先显示图片的右下角区域

第二个是 show-menu-by-longpress 属性，show-menu-by-longpress 属性设置为 true 后，长按图片会触发图片处理菜单。这是小程序提供的一个功能，支持对图片进行分享、收藏、保存以及识别图片中的二维码。

目前支持识别的小程序码包括微信个人码、微信群码、企业微信个人码、企业微信群码、企业微信群二维码和企业微信互通群码。弹出的功能菜单示例如图所示。

对于 mode 属性的这些值，读者可以尝试将 image 组件的宽度、高度设置为不同的值，通过不同的 mode 模式来观察图片的渲染样式，可以更好地理解这些值的用法。另外，如果不显示地设置 image 组件的宽高，则默认为宽度为 320px，高度为 240px。

🔎2.播放音频的 audio 组件

audio 组件顾名思义，就是用来为小程序添加音频播放功能的。在开发小程序时，可能需要为按钮增加点击音效反馈、为某个页面增加背景音乐，或者直接开发音乐播放器相关的应用，这些都可以使用 audio 组件来实现。

首先，在示例工程的 pages 文件夹下新建一组名为 audioDemo 的页面文件。对于音乐播放的需求，可以直接在页面中使用 audio 组件。在 audioDemo.wxml 文件中编写如下代码：

<!-- pages/audioDemo/audioDemo.wxml -->
<audio 
  id="audio" 
  src="https://github.com/ZYHshao/MyPlayer/raw/master/%E6%B8%85%E9%A3%8E%E5%BE%90%E6%9D%A5.mp3" 
  poster="https://img1.baidu.com/it/u=2825714906,1616764684&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" 
  name="清风徐来" 
  author="华语" 
  controls>
</audio>

代码解释

id 属性：为 audio 组件指定一个唯一的 ID。
src 属性：设置音频文件的 URL。
poster 属性：设置音频的封面图片。
name 属性：设置音频的名称。
author 属性：设置音频的作者。
controls 属性：控制是否显示默认的音频播放器样式。

运行代码，效果如图所示。点击页面中的播放按钮后，即可听到悦耳的音乐。

audio 组件的属性

属性名	类型	意义
id	字符串	设置 audio 组件的唯一标识
src	字符串	要播放的音频资源地址
loop	布尔值	设置是否循环播放
controls	布尔值	设置是否显示默认的样式
poster	字符串	设置音频组件上封面图片的资源地址
name	字符串	设置音频组件上显示的音频名字
author	字符串	设置音频组件上显示的音频作者
binderror	函数	音频播放发生错误时触发的回调
bindpause	函数	暂停播放时触发的回调
bindplay	函数	开始播放时触发的回调
bindtimeupdate	函数	播放进度发生变化时触发的回调
bindended	函数	播放结束时触发的回调

虽然框架默认提供了一套简洁美观的 UI 样式，但很多时候这并不是我们需要的。更多时候，我们需要完全自定义音频播放器页面，或者只把音频播放器作为背景功能来使用。这样可以通过 createAudioContext 方法来获取到 audio 组件对应的 JavaScript 上下文对象使用上下文对象来控制音频播放等行为。修改 audioDemo.wxml 中的代码如下：

<!-- pages/audioDemo/audioDemo.wxml -->
<audio id="audio"></audio>
<button type="primary" bindtap="play">播放</button>
<view style="height: 20px;"></view>
<button type="primary" bindtap="pause">暂停</button>
<view style="height: 20px;"></view>
<button type="primary" bindtap="replay">重新播放</button>

在 audioDemo.js 文件中实现逻辑代码如下：

// pages/audioDemo/audioDemo.js
Page({
  onReady: function(e) {
    this.audioCtx = wx.createAudioContext('audio');
    this.audioCtx.setSrc("https://github.com/ZYHshao/MyPlayer/raw/master/%E6%B8%85%E9%A3%8E%E5%BE%90%E6%9D%A5.mp3");
  },
  play: function() {
    this.audioCtx.play();
  },
  pause: function() {
    this.audioCtx.pause();
  },
  replay: function() {
    this.audioCtx.seek(0);
  }
});

运行代码，页面如图所示。

点击页面上的功能按钮，发现已经可以任意控制音频的播放、暂停等逻辑。AudioContext 对象支持的方法如表所示。

方法名	参数	意义
setSrc	String src: 音频地址	设置音频地址
play	无	播放音频
pause	无	暂停播放音频
seek	Number pos: 播放位置	设置播放音频的时间位置

虽然 audio 组件有默认的样式并提供了自定义样式的方法，但在实际开发中，依然很少使用这个组件。并且小程序官方文档也明确指出，之后将不再维护 audio 组件，推荐开发者使用更加灵活高级的 InnerAudioContext 对象处理音频需求。

可以先将 audioDemo.wxml 文件中的 audio 组件删除，只保留 3 个功能按钮。修改 audioDemo.js 文件如下：

// pages/audioDemo/audioDemo.js
Page({
    onReady:function(e) {
        this.audioCtx = wx.createInnerAudioContext() // 获取音频播放器上下文对象
        // 设置要播放的音频文件路径
        this.audioCtx.src = "https://github.com/ZYHshao/MyPlayer/raw/master/%E6%B8%85%E9%A3%8E%E5%BE%90%E6%9D%A5.mp3";
        this.audioCtx.onPlay(()=>{ // 音频播放器开始播放音频的回调
            console.log("Play");
        });
        this.audioCtx.onPause(()=>{ // 音频播放器暂停播放音频的回调
            console.log("Pause");
        });
    },
    play:function() { // 手动开启播放
        this.audioCtx.play()
    },
    pause:function() {  // 手动暂停播放
        this.audioCtx.pause()
    },
    replay:function() { // 手动从头播放
        this.audioCtx.seek(0)
    }
})

运行代码，音频依然可以被正常地播放与暂停。wx.createInnerAudioContext 方法用来创建一个 InnerAudioContext 对象。此对象无需标签组件依赖即可实现音频资源的逻辑控制，相比 audio 组件，InnerAudioContext 对象的使用更加灵活，并且提供了更丰富的方法供我们监听音频播放的过程。

InnerAudioContext 对象提供的属性如表所示。

属性名	类型	意义
src	字符串	音频资源地址
startTime	数值	开始播放的位置
autoplay	布尔值	是否自动开始播放
loop	布尔值	是否循环播放
obeyMuteSwitch	布尔值	是否受手机系统的静音开关的控制
volume	数值	音量，取值范围 0~1
playbackRate	数值	设置播放速度，取值范围为 0.5~2
duration	数值	此属性只读不能设置，获取当前音频时长，单位为秒
currentTime	数值	此属性只读，不能设置，获取当前音频的播放位置，单位为秒
paused	布尔值	此属性只读，不能设置，获取当前音频是否处于暂停状态
buffered	数值	此属性只读，不能设置，获取当前音频已缓冲的时间点，单位为秒

InnerAudioContext 对象提供的方法如表所示。

方法名	参数	意义
play	无	播放音频
pause	无	暂停音频
stop	无	停止播放音频
seek	Number pos: 位置	跳转到指定位置开始播放
destroy	无	销毁当前实例对象
onCanplay	Function callback: 函数对象	监听音频进入可播放状态事件
offCanplay	Function callback: 函数对象	取消监听音频进入可播放状态事件
onPlay	Function callback: 函数对象	监听音频开始播放事件
offPlay	Function callback: 函数对象	取消监听音频开始播放事件
onPause	Function callback: 函数对象	监听音频暂停事件
offPause	Function callback: 函数对象	取消监听音频暂停事件
onStop	Function callback: 函数对象	监听音频停止事件
offStop	Function callback: 函数对象	取消监听音频停止事件
onEnded	Function callback: 函数对象	监听音频播放结束事件
offEnded	Function callback: 函数对象	取消监听音频播放结束事件
onTimeUpdate	Function callback: 函数对象	监听音频播放进度更新事件
offTimeUpdate	Function callback: 函数对象	取消监听音频播放进度更新事件
onError	Function callback: 函数对象	监听音频播放失败事件
offError	Function callback: 函数对象	取消监听音频播放失败事件
onWaiting	Function callback: 函数对象	监听音频加载中需要等待事件
offWaiting	Function callback: 函数对象	取消监听音频加载中需要等待事件
onSeeking	Function callback: 函数对象	监听音频进行跳转操作的事件
offSeeking	Function callback: 函数对象	取消监听音频进行跳转操作的事件
onSeeked	Function callback: 函数对象	监听音频完成跳转操作的事件
offSeeked	Function callback: 函数对象	取消监听音频完成跳转操作的事件

可以看到，InnerAudioContext 对象提供了相当多的属性和方法，通过它，开发者可以更加细致灵活地进行音频需求的开发。需要注意，在小程序中播放音频时，可能会触发系统的其他事件中断，例如有电话打入、用户拍照等时，可以通过 wx.onAudioInterruptionBegin 和 wx.onAudioInterruptionEnd 两个 API 接口来添加中断监听和结束后恢复的处理。

🔎3.播放视频的 video 组件

前面介绍了播放音频的 audio 组件，对于视频播放来说，小程序开发框架中提供了 video 组件。在使用上，video 组件与 audio 组件十分类似。在示例工程的 pages 文件夹下新建一组命名为 videoDemo 的页面文件，在 videoDemo.wxml 文件中编写如下示例代码：

<!--pages/videoDemo/videoDemo.wxml-->
<video id="video"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
danmu-list="{{danmu}}"
danmu-btn
enable-danmu
show-fullscreen-btn
show-play-btn
></video>

如上代码编写好页面结构后，只要配置弹幕的数据即可。使用非常方便,在 videoDemo.js 中编写如下示例代码：

// pages/videoDemo/videoDemo.js

page({
  data: {
    danmu: [{
      text: '弹幕',
      color: '#ff0000',
      time: 1
    }]
  }
})

运行代码，效果如图所示。

由于视频播放业务本身的复杂性较高, video 组件可配置的属性也比较多，具体如表所示。

属性名	类型	意义
src	字符串	播放的视频资源的地址，可以使用云文件的 ID
duration	数值	指定视频时长，不设置默认以解析视频文件时长
controls	布尔值	是否显示默认的播放控件
danmu-list	数组	设置弹幕列表
danmu-btn	布尔值	设置是否显示弹幕按钮
enable-danmu	布尔值	设置是否显示弹幕
autoplay	布尔值	设置是否自动播放
loop	布尔值	设置是否循环播放
muted	布尔值	设置是否静音播放
initial-time	数值	设置视频开始播放的初始位置
page-gesture	布尔值	设置在非全屏模式下，是否开启通过手势调节进度与音量
direction	数值	设置全屏时视频的方向，可设置为：
show-progress	布尔值	设置是否显示视频播放进度
show-fullscreen-btn	布尔值	设置是否显示全屏切换按钮
show-play-btn	布尔值	设置是否显示播放按钮
show-center-play-btn	布尔值	设置是否在视频中间位置显示播放按钮
enable-progress-gesture	布尔值	设置视频与 video 容器大小不同时的展示方式，可选值为 `contain`，`fill`，`cover`
object-fit	字符串	设置播放概率封面的地址，可设置为文件的 ID
poster	字符串	设置是否显示静音按钮
show-mute-btn	布尔值	指视频片名播放
title	字符串	设置控件中播放按钮显示位置，可选值为 `bottom`， `center`
play-btn-position	字符串	设置是否开启手势控制播放与暂停
enable-play-gesture	布尔值	设置跳转到其他页面时，是否自动停止播放，不设置此属性自动恢复播放
auto-pause-if-navigate	布尔值	设置跳转到微信其他页面时，是否自动停止播放，不设置此属性自动恢复播放
auto-pause-if-open-native	布尔值	设置在非全屏模式下，是否开启手势调节进度与音量
vslide-gesture	布尔值	设置开启全屏模式下，是否开启手势调节进度与音量
vslider-gesture-in-fullscreen	字符串	视频单元
ad-unit-id	字符串	设置用于托管的视频封面图地址
poster-for-crawler	字符串	设置小窗模式下，数组中可加入：推播，进北京pk小窗模式，进行pop触发切换模式
show-casting-button	数组	布尔值，设置是否开启图像中的操作
picture-in-picture-show-progress	布尔值	设置是否开双轮模式下显示播放进度，是否显示屏下定键，是否显示播放按钮
enable-auto-rotation	布尔值	设置是否开启全屏模式
show-screen-lock-button	布尔值	设置后封面图标签
show-snap-button	布尔值	播放按钮技，是否显示播放按钮
show-background-playback-button	布尔值	播放进度；适用于android，仅是
background-poster	字符串	android平台有效：https：//示例new：fill后推播极速模式，
is-drm	布尔值	啋心实时表播视频 kiko视频资源
hideStatusBar	无	隐藏状态栏，仅在 iOS 平台有效
exitPictureInPicture	无	关闭视频小窗
requestBackgroundPlayback	无	进入后台播放音频模式
exitBackgroundPlayback	无	退出后台音频播放模式

🔎5.捕获影像的 camera 组件

camera 组件与硬件中的相机模块相关。通过 camera 组件可以方便地获取到用户设备摄像头捕获到的实时影像数据。当然使用此功能时会要求用户给予授权。camera 组件本身使用非常简单，在示例工程的 pages 文件夹下新建一组名为 cameraDemo 的页面文件，在 cameraDemo.wxml 文件中编写如下示例代码：

<!-- pages/cameraDemo/cameraDemo.wxml -->
<camera device-position="back" flash="off" style="width: 100%; height: 300px;"></camera>

可以尝试在手机设备上运行代码，允许使用相机后，即可在页面上看到摄像头捕获到的实时影像，如图所示。

需要注意，同一个页面中只能存在一个 camera 组件。通过 camera 组件的属性可以根据需求对相机功能进行配置，camera 组件支持的属性如表所示。

属性名	类型	意义
mode	字符串	应用模式，可选值为： - normal: 相机模式 - scanCode: 扫码模式
resolution	字符串	分辨率，可选值为： - low: 低分辨率 - medium: 中分辨率 - high: 高分辨率
device-position	字符串	设置摄像头朝向，可选值为： - front: 前置 - back: 后置
flash	字符串	闪光灯配置，可选值为： - auto: 自动 - on: 打开 - off: 关闭 - torch: 常亮
frame-size	字符串	设置相机帧大小，可选值为： - small: 小尺寸 - medium: 中尺寸 - large: 大尺寸
bindstop	函数	绑定摄像头停止运行时的回调
binderror	函数	绑定出现异常时的回调
bindinitdone	函数	绑定相机初始化完成的回调
bindscancode	函数	绑定扫码识别成功时的回调

页面底部还展示了一个代码示例，详见以下内容：

// pages/cameraDemo/cameraDemo.js
Page({
    onReady: function(e) {
        this.camera = wx.createCameraContext(); // 获取相机上下文对象

        // 拍摄当前视频帧
        this.camera.takePhoto({
            quality: 'high', // 质量
            success: (res) => { // 获取成功的回调
                console.log(res.tempImagePath);
            }
        });
    }
});

该段代码描述了如何使用 wx.createCameraContext 方法获取 camera 上下文对象，并通过调用 takePhoto 方法进行拍照操作。

CameraContext 对象的方法

方法名	参数	意义
onCameraFrame	Function callback: 回调函数	获取相机实时帧数据
takePhoto	Object - String quality: 拍摄质量 - Function success: 成功回调 - Function fail: 失败回调 - Function complete: 完成回调	拍摄照片；其中配置对象里的 quality 参数用来设置拍照的图片质量，可设置为： - high: 高质量 - normal: 普通质量 - low: 低质量成功的回调函数中，会将拍照的临时地址以 tempImagePath 参数的形式传入
setZoom	Object - Number zoom: 缩放比例 - Function success: 成功回调 - Function fail: 失败回调 - Function complete: 完成回调	设置缩放级别
startRecord	Object - Function timeoutCallback: 超时回调 - Function success: 成功回调 - Function fail: 失败回调 - Function complete: 完成回调	开始录像，回调函数中会将录制的视频封面和视频路径传入
stopRecord	Object - Boolean compressed: 是否启用视频后压缩 - Function success: 成功回调 - Function fail: 失败回调 - Function complete: 完成回调	结束录像，回调函数中会将录制的视频封面和视频路径传入

🔎6.直播与音视频通话相关组件

我们知道，微信本身就是一款十分流行的社交应用。对于社交应用来说，实时直播和多人音视频通话是非常重要的功能，小程序中也提供了相关的组件对这类功能进行支持。

小程序中对直播和音视频功能的使用还是有一定的限制，首先只有某些指定类目下的小程序才可以使用直播和音视频功能，包括社交类、教育类、医疗类等小程序，具体的类目要求读者可以在官方文档中查询到。其次小程序符合类目要求后还需要在小程序管理后台的开发管理-接口设置中开通对应的接口权限，如图所示。

小程序的直播功能需要使用到 live-pusher 组件，该组件会将实时录制的音视频数据以流的方式推送出去。live-pusher 组件的属性如表所示：

属性名	类型	意义
url	字符串	推流地址
mode	字符串	录制模式，可选值为： - SD: 标清 - HD: 高清 - FHD: 超清 - RTC: 实时通话
autopush	布尔值	设置是否自动推流
muted	布尔值	设置是否静音
enable-camera	布尔值	设置是否开启摄像头
auto-focus	布尔值	设置是否自动聚焦
orientation	字符串	设置画面方向，可选值为： - vertical: 竖直 - horizontal: 水平
beauty	数值	设置美颜范围，可选值为 0-9，设置为 0 表示关闭美颜
whiteness	数值	设置美白范围，可选值为 0-9，设置为 0 表示关闭美白
aspect	字符串	设置宽高比，支持框架配型 - "3:4" - "9:16"
min-bitrate	数值	设置最小码率
max-bitrate	数值	设置最大码率
audio-quality	字符串	设置音质，可选值为： - high: 高音质 - low: 低音质
waiting-image	字符串	设置推流的等待画面
waiting-image-hash	字符串	等待画面资源的 MD5 值
zoom	布尔值	设置是否调整焦距
device-position	字符串	设置相机位置，可选值为： - front: 前置 - back: 后置
background-mute	布尔值	进入后台是否静音
mirror	布尔值	设置是否镜像画面
remote-mirror	布尔值	作用同 mirror
local-mirror	字符串	设置本地预览画面是否镜像，可选值为： - auto: 自动选择 - enable: 前后置摄像头均镜像 - disable: 前后置摄像头均不镜像
audio-reverb-type	数值	设置音频的混响类型，可选值为： - 0: 关闭 - 1: KTV 风格 - 2: 小房间风格 - 3: 大会堂风格 - 4: 低沉风格 - 5: 流行风格 - 6: 金属风格 - 7: 磁性风格
enable-mic	布尔值	开启或关闭麦克风
enable-agc	布尔值	设置是否开启音频自动增益
enable-ans	布尔值	设置是否开启音频噪声抑制
audio-volume-type	字符串	设置音量类型，可选值为： - auto: 自动 - media: 媒体音量 - voicecall: 通话音量
video-width	数值	推流数据中的视频宽度
video-height	数值	推流数据中的视频高度
beauty-style	字符串	设置美颜类型，可选值为： - smooth: 光滑美颜 - nature: 自然美颜
filter	字符串	设置滤镜风格，可选值为： - standard: 标准 - pink: 粉嫩 - nostalgia: 怀旧 - blues: 蓝调 - romantic: 浪漫 - cool: 清凉 - fresher: 清新 - solor: 日系 - aestheticism: 唯美 - whitening: 美白 - cerisered: 樱红
bindstatechange	函数	绑定状态变化事件
bindnetstatus	函数	绑定网络变化事件
binderror	函数	绑定渲染错误事件
bindbgmstart	函数	绑定背景音乐开始播放事件
bindbgmprogress	函数	绑定背景音乐播放进度变化事件
bindbgmcomplete	函数	绑定背景音乐播放完成事件
bindaudiovolumenotify	函数	绑定麦克风采集音量最大事件

使用 live-pusher 组件完成主播端的推流后，观众端需要使用 live-player 组件来获取直播流数据进行播放。live-player 组件要略微简单些，其可配置的属性如表所示：

属性名	类型	意义
src	字符串	拉流地址
mode	字符串	模式设置，可选值为： - live: 直播 - RTC: 实时通话
autoplay	布尔值	设置是否自动播放
muted	布尔值	设置是否静音
orientation	字符串	设置画面方向，可选值为： - vertical: 竖直 - horizontal: 水平
object-fit	字符串	设置填充模式，可选值为： - contain: 包含 - fillCrop: 铺满
background-mute	布尔值	设置进入后台是否静音
min-cache	数值	设置最小缓存
max-cache	数值	设置最大缓存
sound-mode	字符串	设置声音输出方式，可选值为： - speaker: 扬声器 - ear: 听筒
auto-pause-if-navigate	布尔值	设置跳转小程序中的其它页面时是否自动暂停播放
auto-pause-if-open-native	布尔值	设置跳转到微信其他页面时是否自动暂停播放
picture-in-picture-mode	字符串数组	设置小窗模式
bindstatechange	函数	绑定播放状态变化事件
bindfullscreenchange	函数	绑定全屏变化事件
bindnetstatus	函数	绑定网络状态变化事件
bindaudiovolumenotify	函数	绑定音量大小变化事件
bindenterpictureinpicture	函数	绑定进入小窗模式事件
bindleavepictureinpicture	函数	绑定离开小窗模式事件

live-player 组件本质上也是一个视频播放器，可以为其设置 id 属性，然后通过如下方法拿到组件对应的 JavaScript 上下文对象，使用上下文对象也可以方便地对播放器行为进行控制：

wx.createLivePlayerContext(id)

最后，我们再来讲一下视频通话功能。这个功能比较复杂，首先需要调用wxjoinVIPChat方法来创建或加入一个聊天房间，创建房间完成后，服务端需要保存此房间的groupId值，之后需要加入此房间的用户使用joinVIPChat 来加入即可，加入后，即可使用voip-room 组件来展示某个房间中成员的实时影像。整体过程需要前后端协同完成。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生