Skip to main content
Version: Next

Video

Video. Related AP: Taro.createVideoContext

Note: No test on h5, so for now it says "pending", need Video to confirm.

Reference

Type

ComponentType<VideoProps>

Examples

export default class PageView extends Component {
constructor() {
super(...arguments)
}

render() {
return (
<View className='components-page'>
<Video
id='video'
src='https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400'
poster='https://misc.aotu.io/booxood/mobile-video/cover_900x500.jpg'
initialTime='0'
controls={true}
autoplay={false}
loop={false}
muted={false}
/>
</View>
)
}
}

VideoProps

PropertyTypeDefaultRequiredDescription
srcstringYesThe address of the video to be played.
durationnumberNoThe duration of the video
controlsbooleantrueNoSpecifies whether to display default playback controls (Play/Pause buttons, playback progress, and timeline).
danmuListany[]NoList of barrage comments
danmuBtnbooleanfalseNoSpecifies whether to display the barrage button. It is valid only during initialization, and cannot be dynamically changed.
enableDanmubooleanfalseNoSpecifies whether to display barrage comments. It is valid only during initialization, and cannot be dynamically changed.
autoplaybooleanfalseNoSpecifies whether to enable auto playback
loopbooleanfalseNoSpecifies whether to enable loop playback
mutedbooleanfalseNoSpecifies whether to enable muted playback
initialTimenumberNoSpecifies the initial time point at which the video starts to play
pageGesturebooleanfalseNo(Discarded. See vslide-gesture.) Specifies whether to enable brightness and volume adjusting gestures in the non-full-screen mode.
directionnumberNoSpecifies the direction of the video in the full screen. If it is not specified, the direction is set automatically based on the aspect ratio.
showProgressbooleantrueNoIf this property is not specified, the progress bar is displayed only when the width is greater than 240 px.
showFullscreenBtnbooleantrueNoSpecifies whether to display the full screen button
showPlayBtnbooleantrueNoSpecifies whether to display the play button in the bottom control bar of the video
showCenterPlayBtnbooleantrueNoSpecifies whether to display the play button in the center of the video
enableProgressGesturebooleantrueNoSpecifies whether to enable progress control gestures
objectFit"contain" | "fill" | "cover""contain"NoThe presentation of the video when the video size differs from the video container size
posterstringNoThe URL or cloud file ID of the image on the video cover. If the value of the controls property is false, the setting of the poster does not take effect.
showMuteBtnbooleanfalseNoSpecifies whether to display the mute button
titlestringNoThe title of the video. It is displayed on the top in the full screen mode.
playBtnPosition"bottom" | "center"'bottom'NoThe location of the play button
enablePlayGesturebooleanfalseNoSpecifies whether to enable the playback gestures: Double-tap to switch between play/pause.
autoPauseIfNavigatebooleantrueNoSpecifies whether to automatically pause the video on the current page when the user is navigated to another Mini Program page.
autoPauseIfOpenNativebooleantrueNoSpecifies whether to automatically pause the real-/video on the current page upon the navigation to another native page of WeChat.
vslideGesturebooleanfalseNo(Same as pageGesture) Specifies whether to enable brightness and volume adjusting gestures in the non-full-screen mode.
vslideGestureInFullscreenbooleantrueNoSpecifies whether to enable brightness and volume adjusting gestures in the full screen mode.
adUnitIdstringNoUnit IDs for pre-video posting ads, see Open Capabilities for more details Advertising before the video.
posterForCrawlerstringNoIt is recommended to use a video cover image without a play icon and only supports network addresses.
showCastingButtonbooleanNoSpecifies whether to show cast button. Android only and rendered on the same layer, DLNA protocol supported.
onPlayBaseEventOrigFunction<any>NoTriggers the play event when the playback is started/resumed
onPauseBaseEventOrigFunction<any>NoTriggers the pause event when the playback is paused
onEndedBaseEventOrigFunction<any>NoTriggers the ended event at the end of the video.
onTimeUpdateBaseEventOrigFunction<onTimeUpdateEventDetail>NoTriggered when the playback progress changes.

event.detail = {currentTime, duration}. It is triggered every 250 ms.
onFullscreenChangeBaseEventOrigFunction<onFullscreenChangeEventDetail>NoTriggered when the video enters or exits the full screen.
event.detail = {fullScreen, direction}. Valid values of direction include vertical and horizontal.
onWaitingBaseEventOrigFunction<onWaitingEventDetail>NoTriggered when the video starts buffering
onErrorBaseEventOrigFunction<any>NoTriggered when an error occurs during video playback
onProgressBaseEventOrigFunction<onProgressEventDetail>NoTriggered when the loading progress changes. It is supported only for a section of progress. event.detail = {buffered}. Its value is a percentage.
onLoadedMetaDataBaseEventOrigFunction<any>NoTriggered when the video metadata has finished loading. event.detail = {width, height, duration}

Property Support

PropertyWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
VideoProps.src✔️✔️✔️✔️✔️✔️
VideoProps.duration✔️✔️✔️(Pending)✔️
VideoProps.controls✔️✔️✔️✔️✔️✔️
VideoProps.danmuList✔️✔️(Pending)
VideoProps.danmuBtn✔️✔️(Pending)
VideoProps.enableDanmu✔️✔️(Pending)
VideoProps.autoplay✔️✔️✔️✔️✔️✔️
VideoProps.loop✔️✔️✔️✔️✔️✔️
VideoProps.muted✔️✔️✔️✔️✔️✔️
VideoProps.initialTime✔️✔️✔️✔️✔️✔️
VideoProps.direction✔️✔️✔️(Pending)
VideoProps.showProgress✔️✔️(Pending)
VideoProps.showFullscreenBtn✔️✔️✔️(Pending)
VideoProps.showPlayBtn✔️✔️✔️(Pending)
VideoProps.showCenterPlayBtn✔️✔️✔️(Pending)✔️
VideoProps.enableProgressGesture✔️✔️✔️(Pending)
VideoProps.objectFit✔️✔️✔️(Pending)
VideoProps.poster✔️✔️✔️✔️✔️✔️
VideoProps.showMuteBtn✔️(Pending)
VideoProps.title✔️(Pending)
VideoProps.playBtnPosition✔️(Pending)
VideoProps.enablePlayGesture✔️(Pending)
VideoProps.autoPauseIfNavigate✔️(Pending)
VideoProps.autoPauseIfOpenNative✔️(Pending)
VideoProps.vslideGesture✔️✔️(Pending)
VideoProps.vslideGestureInFullscreen✔️(Pending)
VideoProps.adUnitId✔️
VideoProps.posterForCrawler✔️
VideoProps.showCastingButton✔️
VideoProps.onPlay✔️✔️✔️✔️✔️✔️
VideoProps.onPause✔️✔️✔️✔️✔️✔️
VideoProps.onEnded✔️✔️✔️✔️✔️✔️
VideoProps.onTimeUpdate✔️✔️✔️✔️✔️✔️
VideoProps.onFullscreenChange✔️✔️✔️(Pending)✔️
VideoProps.onWaiting✔️✔️(Pending)
VideoProps.onError✔️✔️✔️✔️✔️✔️
VideoProps.onProgress✔️✔️(Pending)
VideoProps.onLoadedMetaData✔️✔️

direction

Valid values of direction

ValueDescription
0Retains the normal vertical direction
90Rotates the screen 90 degrees counter-clockwise
-90Rotates the screen 90 degrees clockwise

objectFit

Valid values of objectFit

ValueDescription
containContain
fillFill
coverCover

playBtnPosition

Valid values of playBtnPosition

ValueDescription
bottomIn the controls bar
centerIn the center of the video

onTimeUpdateEventDetail

ParamTypeDescription
currentTimenumberCurrent time
durationnumberDuration

onFullscreenChangeEventDetail

ParamTypeDescrtiption
directionnumberDirection
fullScreennumber | booleanFull Screen

onWaitingEventDetail

ParamTypeDescription
directionnumberDirection
fullScreennumber | booleanFull Screen

onProgressEventDetail

ParamTypeDescription
bufferednumberPercentage

API Support

APIWeChat Mini-ProgramBaidu Smart-ProgramAlipay Mini-ProgramByteDance Micro-AppH5React Native
Video✔️✔️✔️✔️✔️