小程序音视频功能_小程序video组件支持hls

小程序在初期的版本提供的音视频相关的组件有：用于播放音频的audio组件（该组件不再维护，建议使用 wx.createInnerAudioContext 接口）、用于播放视频的video组件。 除了客户端组件小程序还提供了一些音视频相关的客户端API， 例如：音频相关API、视频相关API、背景音乐相关API、录音API等。下面的是一个使用video组件播放视频的例子：
示例代码：vedio.wxml

<video id="vedio1" src="http://xxxx.mp4" style="width:100%"></video>
<view style="padding:10rpx">
  <button bindtap="play" style="margin-top:10rpx">播放</button>
  <button bindtap="pause" style="margin-top:10rpx">暂停</button>
</view>  
1
2
3
4
5

示例代码：vedio.js

Page({
  vedio_ctx:null,
  data: {
  },
  onReady: function () {
    this.vedio_ctx = wx.createVideoContext('vedio1');
  },
  play:function() {
    this.vedio_ctx.play()
  },
  pause:function() {
    this.vedio_ctx.pause()
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

上面的代码中使用video组件来播放指定地址的视频文件。video组件支持网络点播，协议支持http和hls协议，video组件采用了系统播放器来实现，只能支持高延时直播和视频点播功能，不能用于对于延迟要求比较高的在线直播以及音视频通话之类的应用。然而在线直播以及音视频通话一类的应用在APP开发中已经非常普遍，广大小程序开发者非常希望微信小程序也能够提供在线直播以及音视频通话的功能。为了适应开发者的这些要求，2017年腾讯视频云团队跟微信团队联合，将视频云SDK跟微信小程序整合在一起，并通过live-pusher和live-player两个组件的形式开放内部的功能。下图是小程序应用与小程序组件以及视频SDK之间的关系图：

live-pusher组件用于实时音视频录制，并向视频云进行推流。live-pusher支持两种模式：直播模式（SD：标清, HD：高清, FHD：超清）和RTC模式，前者用于直播推流，后者用于实时视频通话。live-player组件从视频云拉流，并用于实时音视频播放。live-player也支持两种模式：Live模式和RTC模式，前者用于直播播放，后者用于后者用于实时视频通话。live-pusher与live-player与视频云的关系如下图所示：

通过live-pusher和live-player两个组件，开发者可以实现在线直播、低延时监控、双人视频通话以及多人视频会议等功能。