Basic operation of WeChat applet video
1. Video
The applet provides wx.createVideoContext(string id,Object this)、wx.chooseVideo(Object object)、wx.saveVideoToPhotosAlbum(Object object)an interface such as to operate the mobile phone video.
1.1 wx.createVideoContext(string id,Object this)接口
Create a video context VideoContext object.
The syntax is as follows:
this.videoContext=wx.createVideoContext('myVideo')
1.1.2 Common functions of VideoContext object
| interface | Function and Use |
|---|---|
| VideoContext.play() | play video |
| VideoContext.pause() | pause video |
| VideoContext.stop() | stop video |
| VideoContext.seek(number position) | Jump to the specified position (unit, s) |
| VideoContext.sendDanmu(Object data) | Send barrage |
| VideoContext.playbackRate(number rate) | Set double speed playback |
| VideoContext.requestFullScreen(Object object) | Go to full screen. If custom content needs to be displayed in full screen, the content node needs to be placed in the video node. |
| VideoContext.exitFullScreen() | Exit Full Screen |
| VideoContext.showStatusBar() | Display the status bar, only valid in iOS full screen |
| VideoContext.hideStatusBar() | Hide the status bar, only valid in iOS full screen |
1.1.3 Small case
This example uses wx.createVideoContext()the videoContext object to create a Video context, and then performs the operations of sending barrage, playing, pausing, positioning, and rolling back to the food.
createVideoContext.wxml
<view class="section tc">
<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" danmu-list="{
{danmuList}}" enable-danmu danmu-btn controls ></video>
<view class="btn-area">
<input bindblur="bindInputBlur" />
<button bindtap="bindSendDanmu">发送弹幕</button>
</view>
</view>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">跳到2分钟位置</button>
<button type="primary" bindtap="audioStart">回到开头</button>
createVideoContext.js
function getRandomColor() {
const rgb = []
for (let i = 0; i < 3; ++i) {
let color = Math.floor(Math.random() * 256).toString(16)
color = color.length == 1 ? '0' + color : color
rgb.push(color)
}
return '#' + rgb.join('')
}
Page({
onReady(res) {
this.videoContext = wx.createVideoContext('myVideo')
},
inputValue: '',
data: {
src: '',
danmuList: [
{
text: '第 1s 出现的弹幕',
color: '#ff0000',
time: 1
},
{
text: '第 3s 出现的弹幕',
color: '#ff00ff',
time: 3
}]
},
bindInputBlur(e) {
this.inputValue = e.detail.value
},
bindSendDanmu() {
this.videoContext.sendDanmu({
text: this.inputValue,
color: getRandomColor()
})
},
audioPlay: function () {
this.videoContext.play() //播放
},
audioPause: function () {
this.videoContext.pause() //暂停
},
audio14: function () {
this.videoContext.seek(120) //跳转到120秒处
},
audioStart: function () {
this.videoContext.seek(0) //回到开头
}
})
play
Jump to 2 minutes position:
Back to the beginning:
1.2 wx.chooseVideo() interface
Take a video or choose a video from your phone's camera roll. wx.chooseVideo()The interface parameters are shown in the table.
| Attributes | type | Defaults | required | illustrate | minimum version | |
|---|---|---|---|---|---|---|
| sourceType | Array. | [‘album’, ‘camera’] | no | source of video selection | album Select a video from the album camera Use the camera to shoot a video | |
| compressed | boolean | true | no | Whether to compress the selected video files | 1.6.0 | |
| maxDuration | number | 60 | no | The maximum shooting time of shooting video, in seconds | ||
| camera | string | ‘back’ | no | By default, the front or rear camera is pulled up. Some Android phones cannot take effect because the system ROM does not support it | ||
| success | function | no | Callback function for successful interface call | |||
| fail | function | no | Callback function for interface call failure | |||
| complete | function | no | The callback function of the end of the interface call (the call will be executed successfully or failed) |
object.success callback function
parameter
Object res
| Attributes | type | illustrate |
|---|---|---|
| tempFilePath | string | The temporary file path (local path) of the selected video |
| duration | number | The duration of the selected video |
| size | number | The data size of the selected video |
| height | number | Returns the height of the selected video |
| width | number | Returns the width of the selected video |
sample code
wx.chooseVideo({
sourceType: ['album','camera'],
maxDuration: 60,
camera: 'back',
success(res) {
console.log(res.tempFilePath)
}
})
1.2.1 Small case
This example uses wx.chooseVideo()the interface to select a certain video on the mobile phone, and then plays the selected video.
chooseVideo.wxml
<view class="section tc">
<video id="myVideo" src="{
{src}}" danmu-list="{
{danmuList}}" enable-danmu danmu-btn controls ></video>
</view>
<button type="primary" bindtap="uploadvideo">上传视频</button>
<button type="primary" bindtap="audioPlay">播放</button>
chooseVideo.js
Page({
onReady(res) {
},
inputValue: '',
data: {
src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
},
uploadvideo: function () {
var that=this;
wx.chooseVideo({
sourceType: ['album', 'camera'],
maxDuration: 60,
camera: 'back',
success(res) {
that.setData({
src: res.tempFilePath
})
console.log(that.data.src)
}
})
},
audioPlay: function () {
this.videoContext = wx.createVideoContext('myVideo')
this.videoContext.play()
}
})
sourceType:['album','camera'] indicates that the video on the mobile phone can be selected, and the video can also be taken in time. After selecting a new video, use
wx.createVideoContext()to get the VideoContext object and usethis.videoContext.play()to play the selected video.
Click to upload video
Click to play (it can be played normally, and the test is normal)
1.3 wx.saveVideoToPhotosAlbum(Object object)接口
This interface saves the video to the system album. Support mp4 video format.
| Attributes | type | Defaults | required | illustrate |
|---|---|---|---|---|
| filePath | string | yes | Video file path, which can be a temporary file path or a permanent file path (local path) | |
| success | function | no | Callback function for successful interface call | |
| fail | function | no | Callback function for interface call failure | |
| complete | function | no | The callback function of the end of the interface call (the call will be executed successfully or failed) |
1.3.1 Case
This example uses wx.saveVideoToPhotosAlbum(Object object)the interface to save a video to the video library of the mobile phone.
saveVideo.wxml
<view class="section tc">
<video id="myVideo" src="{
{src}}" danmu-list="{
{danmuList}}" enable-danmu danmu-btn controls></video>
</view>
<button type="primary" bindtap="save">保存视频</button>
saveVideo.js
Page({
inputValue: '',
data: {
src: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
},
save: function () {
var that=this;
wx.downloadFile({
url: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400', //仅为示例，并非真实的资源
success: function (res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.saveVideoToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
wx.showToast({
title: '保存视频成功！',
})
},
fail(res) {
wx.showToast({
title: '保存图片失败！',
})
}
})
}
}
})
}
})
Click to save the video
The developer tools I use here are simulated, and the operation on the mobile phone is the same.
