Skip to main content


Video support Same-layer rendering. Related api:bn.createVideoContext


Page({  data: {    id: 'myVideo',  },  onLoad(query) {    console.log('onload', this, query)  },  onShow() {    console.log(`[LifeCycle][Textarea] useEffect`)    setTimeout(() => {      if (!this.videoContext) throw new Error('Missing VideoContext')    }, 500)  },  onReady() {    this.videoContext = bn.createVideoContext('myVideo')  },
  onPlay(e) {    console.log('[video] onPlay', e)  },  onPause(e) {    console.log('[video] onPause', e)  },  onEnded(e) {    console.log('[video] onEnded', e)  },  onTimeupdate(e) {    console.log('[video] onTimeupdate', e)  },  onFullscreenchange(e) {    console.log('[video] onFullscreenchange', e)  },  onLoadedmetadata(e) {    console.log('[video] onLoadedmetadata', e)  },  onError(e) {    console.log('[video] onError', e)  },})

Bug & Tip

  • tip:video Default width 300px, altitude 225px, available via bxss Set the width and height.


src requiredstringResource address to play video, support network path, local temporary path
controlsbooleanWhether to display the default playback controls/Pause on, playback progress, time)true
autoplaybooleanWhether to autoplayfalse
loopbooleanWhether to play on a loopfalse
mutedbooleanMute Playfalse


bindplayWhen it starts/Triggers play event while continuing playback
bindpauseTriggered when playback is paused pause event
bindendedTriggered when playback is paused pause event
bindtimeupdateTriggered when playback progress changes, event. detail = {currentTime, duration} Trigger frequency. 250ms first
bindfullscreenchangeTriggered when video enters and exits full-screen, event.detail = {fullScreen, direction},direction Valid values are vertical or horizontal
binderrorTriggered when video playback goes wrong