Video

saveVideoToPhotosAlbum

TIP

The API usage is as follows: wx.saveVideoToPhotosAlbum(Object object)

• Functional description: Save the video system album. Supports mp4 video format.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  filePath	string	-	Yes	Video file path, which can be a temporary file path or a permanent file path
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• Sample code:

wx.saveVideoToPhotosAlbum({
  filePath: 'wxfile://xxx',
  success(res) {
    console.log(res.errMsg)
  },
})

createVideoContext

TIP

The API usage is as follows: VideoContext wx.createVideoContext(string id, Object this)

• Functional description: Create a video context VideoContext Object
• Parameters and descriptions:
  • string id: <video> component id.
  • Under the custom component, this of the current component instance, to operate the component <video> Component。
• Return value: VideoContext

chooseVideo

TIP

The API usage is as follows: wx.chooseVideo(Object object)

• Functional description: Shoot a video or select a video from the mobile phone album.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  sourceType	Array.<string>	['album', 'camera']	No	Select video source
  compressed	boolean	true	No	Whether to compress the selected video file
  maxDuration	number	60	No	Shoot video, maximum shooting time, unit: seconds
  camera	string	'back'	No	By default, the front or rear camera is pulled up, which cannot take effect on some Android phones because the system ROM does not support it
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• Legal values

  Value	Description
  album	Select video from the album
  camera	Shoot video with camera

• Legal values

  Value	Description
  back	By default, the rear camera is pulled up
  front	By default, the front camera is pulled up

• object.success callback function parameters: Object res。

  Properties	Type	Description
  tempFilePath	string	Temporary file path of the selected video
  duration	number	The duration of the selected video
  size	number	The data size of the selected video, in B
  height	number	Return the height of the selected video
  width	number	Return the width of the selected video

• Sample code:

wx.chooseVideo({
  sourceType: ['album', 'camera'],
  maxDuration: 60,
  camera: 'back',
  success(res) {
    console.log(res.tempFilePath)
  },
})

compressVideo

TIP

The API usage is as follows: wx.compressVideo(Object object)

• Functional description: Compressed video interface, developers can specify the compression quality for compression. When more precise control is required, bitrate, fps, and resolution can be specified. When quality is passed in, these three parameters will be ignored.

• Parameters and descriptions: Object object

  Properties	Type	Required	Description
  src	string	Yes	Video file path, which can be a temporary file path or a permanent file path
  quality	string	Yes	Compression quality, legal values low:Low medium:Medium high:High
  bitrate	number	Yes	Bitrate, in kbps
  fps	number	Yes	Frame Rate
  resolution	number	Yes	Ratio relative to the resolution of the original video, value range (0, 1]
  success	Function	No	Callback function for successful interface call
  fail	Function	No	Callback function for failed interface call
  complete	Function	No	Callback function for interface call completion (executed regardless of success or failure)

• object.success callback function parameters: Object res。

  Properties	Type	Description
  tempFilePath	string	Compressed temporary file address
  size	number	Compressed size, in kB

chooseMedia

TIP

The API usage is as follows: wx.chooseMedia(Object object)

• Functional description: Take or select pictures or videos from the mobile phone album.

• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  count	number	15	No	The maximum number of files that can be selected, up to 15 files can be supported
  mediaType	Array.<string>	['image'，'video']	No	File type, legal values image:Can only take pictures or select pictures from the album video:Can only take or select videos from the album
  sourceType	Array.<string>	['album', 'camera']	No	Sources for picture and video selection, legal values album:Select from the album camera:Shoot with the camera
  maxDuration	number	10	No	The maximum shooting time for shooting videos, in seconds. The time range is between 3s and 60s. There is no limit on the album.
  sizeType	Array.<string>	['original', 'compressed']	No	Only valid when mediaType is image, whether to compress the selected file
  camera	string	'back'	No	Only valid when sourceType is camera, use the front or rear camera, legal values album:Use rear camera camera:Use front camera
  success	Function	-	No	Callback function for successful interface call
  fail	Function	-	No	Callback function for failed interface call
  complete	Function	-	No	Callback function for interface call completion (executed regardless of success or failure)

• object.success callback function parameters: Object res。

  Properties	Type	Description
  tempFiles	Array.<Object>	Local temporary file list
  type	string	File type, valid values

  tempFiles structure attribute

  Structure properties	Type	Description
  tempFilePath	string	Local temporary file path (local directory)
  size	number	Local temporary file size, unit B
  duration	number	Video duration
  height	number	Video height
  width	number	Video width
  thumbTempFilePath	string	Video thumbnail temporary file path
  fileType	string	File type, legal values image:Image video:Video

• Sample code:

wx.chooseMedia({
  count: 9,
  mediaType: ['image','video'],
  sourceType: ['album', 'camera'],
  maxDuration: 30,
  camera: 'back',
  success(res) {
    console.log(res.tempFiles.tempFilePath)
    console.log(res.tempFiles.size)
  }
})

VideoContext

• Functional description: VideoContext instance, can be obtained through wx.createVideoContext , videoContext is bound to a <video> component through id, and the corresponding operation is <video> Component。

• Sample code:

  Corresponding WXML file

<view class="section tc">
  <video
    id="myVideo"
    src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
    enable-danmu
    danmu-btn
    controls
  ></video>
  <view class="btn-area">
    <input bindblur="bindInputBlur" />
    <button bindtap="bindSendDanmu">Dispatch the barrage</button>
  </view>
</view>

Corresponding js file:

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: '',
  bindInputBlur(e) {
    this.inputValue = e.detail.value
  },
  bindSendDanmu() {
    this.videoContext.sendDanmu({
      text: this.inputValue,
      color: getRandomColor(),
    })
  },
})

Method set

exitFullScreen

TIP

The API usage is as follows: VideoContext.exitFullScreen()

• Functional description: Exit full screen.

exitBackgroundPlayback

TIP

The API usage is as follows: VideoContext.exitBackgroundPlayback()

• Functional description: Exit background audio playback mode.

hideStatusBar

TIP

The API usage is as follows: VideoContext.hideStatusBar()

• Functional description: Hide the status bar, only valid in iOS full screen.

pause

TIP

The API usage is as follows: VideoContext.pause()

• Functional description: Pause the video

play

TIP

The API usage is as follows: VideoContext.play()

• Functional description: Play the video

requestFullScreen

TIP

The API usage is as follows: VideoContext.requestFullScreen(Object object)

• Functional description: Enter full screen. If there is custom content that needs to be displayed in full screen, the content node needs to be placed in the video node.
• Parameters and descriptions: Object object

  Properties	Type	Default value	Required	Description
  direction	number	-	No	Set the direction of the video when in full screen. If not specified, it will be automatically determined based on the aspect ratio

• Legal value of object.direction

  Value	Description
  0	Normal vertical
  90	96 degrees counterclockwise of the screen
  -90	96 degrees clockwise of the screen

requestBackgroundPlayback

TIP

The API usage is as follows: VideoContext.requestBackgroundPlayback()

• Functional description: Enter background audio playback mode.

seek

TIP

The API usage is as follows: VideoContext.seek(number position)

• Functional description: Jump to the specified position
• Parameters and descriptions: number position, The position to jump to, unit: s.

sendDanmu

TIP

The API usage is as follows: VideoContext.sendDanmu(Object data)

• Functional description: Send bullet screen
• Parameter: Object data，Bullet screen content

  Properties	Type	Default value	Required	Description
  text	string	-	Yes	Bullet screen text
  color	string	-	No	Bullet screen color

showStatusBar

TIP

The API usage is as follows: VideoContext.showStatusBar()

• Functional description: Show the status bar, only valid in iOS full screen.

stop

TIP

The API usage is as follows: VideoContext.stop()

• Functional description: Stop video.