Video - 《Taro 文档帮助手册教程》

sidebar_label: Video
Type
Examples
VideoProps
API Support

title: Video

sidebar_label: 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

import Tabs from ‘@theme/Tabs’; import TabItem from ‘@theme/TabItem’;

tsx
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>
    )
  }
}

html
<template>
  <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"
    initial-time="0"
    :controls="true"
    :autoplay="false"
    :loop="false"
    :muted="false"
  />
</template>

VideoProps

Property	Type	Default	Required	Description
src	`string`		Yes	The address of the video to be played.
duration	`number`		No	The duration of the video
controls	`boolean`	`true`	No	Specifies whether to display default playback controls (Play/Pause buttons, playback progress, and timeline).
danmuList	`any[]`		No	List of barrage comments
danmuBtn	`boolean`	`false`	No	Specifies whether to display the barrage button. It is valid only during initialization, and cannot be dynamically changed.
enableDanmu	`boolean`	`false`	No	Specifies whether to display barrage comments. It is valid only during initialization, and cannot be dynamically changed.
autoplay	`boolean`	`false`	No	Specifies whether to enable auto playback
loop	`boolean`	`false`	No	Specifies whether to enable loop playback
muted	`boolean`	`false`	No	Specifies whether to enable muted playback
initialTime	`number`		No	Specifies the initial time point at which the video starts to play
pageGesture	`boolean`	`false`	No	(Discarded. See vslide-gesture.) Specifies whether to enable brightness and volume adjusting gestures in the non-full-screen mode.
direction	`number`		No	Specifies the direction of the video in the full screen. If it is not specified, the direction is set automatically based on the aspect ratio.
showProgress	`boolean`	`true`	No	If this property is not specified, the progress bar is displayed only when the width is greater than 240 px.
showFullscreenBtn	`boolean`	`true`	No	Specifies whether to display the full screen button
showPlayBtn	`boolean`	`true`	No	Specifies whether to display the play button in the bottom control bar of the video
showCenterPlayBtn	`boolean`	`true`	No	Specifies whether to display the play button in the center of the video
enableProgressGesture	`boolean`	`true`	No	Specifies whether to enable progress control gestures
objectFit	`"contain" \| "fill" \| "cover"`	`"contain"`	No	The presentation of the video when the video size differs from the video container size
poster	`string`		No	The 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.
showMuteBtn	`boolean`	`false`	No	Specifies whether to display the mute button
title	`string`		No	The title of the video. It is displayed on the top in the full screen mode.
playBtnPosition	`"bottom" \| "center"`	`‘bottom’`	No	The location of the play button
enablePlayGesture	`boolean`	`false`	No	Specifies whether to enable the playback gestures: Double-tap to switch between play/pause.
autoPauseIfNavigate	`boolean`	`true`	No	Specifies whether to automatically pause the video on the current page when the user is navigated to another Mini Program page.
autoPauseIfOpenNative	`boolean`	`true`	No	Specifies whether to automatically pause the real-/video on the current page upon the navigation to another native page of WeChat.
vslideGesture	`boolean`	`false`	No	(Same as `pageGesture`) Specifies whether to enable brightness and volume adjusting gestures in the non-full-screen mode.
vslideGestureInFullscreen	`boolean`	`true`	No	Specifies whether to enable brightness and volume adjusting gestures in the full screen mode.
adUnitId	`string`		No	Unit IDs for pre-video posting ads, see Open Capabilities for more details Advertising before the video.
posterForCrawler	`string`		No	It is recommended to use a video cover image without a play icon and only supports network addresses.
showCastingButton	`boolean`		No	Specifies whether to show cast button. Android only and rendered on the same layer, DLNA protocol supported.
onPlay	`BaseEventOrigFunction<any>`		No	Triggers the play event when the playback is started/resumed
onPause	`BaseEventOrigFunction<any>`		No	Triggers the pause event when the playback is paused
onEnded	`BaseEventOrigFunction<any>`		No	Triggers the ended event at the end of the video.
onTimeUpdate	`BaseEventOrigFunction<onTimeUpdateEventDetail>`		No	Triggered when the playback progress changes. event.detail = {`{currentTime, duration}`}. It is triggered every 250 ms.
onFullscreenChange	`BaseEventOrigFunction<onFullscreenChangeEventDetail>`		No	Triggered when the video enters or exits the full screen. event.detail = {`{fullScreen, direction}`}. Valid values of direction include vertical and horizontal.
onWaiting	`BaseEventOrigFunction<onWaitingEventDetail>`		No	Triggered when the video starts buffering
onError	`BaseEventOrigFunction<any>`		No	Triggered when an error occurs during video playback
onProgress	`BaseEventOrigFunction<onProgressEventDetail>`		No	Triggered when the loading progress changes. It is supported only for a section of progress. event.detail = {`{buffered}`}. Its value is a percentage.
onLoadedMetaData	`BaseEventOrigFunction<any>`		No	Triggered when the video metadata has finished loading. event.detail = {`{width, height, duration}`}

Property Support

Property	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React 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

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

objectFit

Valid values of objectFit

Value	Description
contain	Contain
fill	Fill
cover	Cover

playBtnPosition

Valid values of playBtnPosition

Value	Description
bottom	In the controls bar
center	In the center of the video

onTimeUpdateEventDetail

Param	Type	Description
currentTime	`number`	Current time
duration	`number`	Duration

onFullscreenChangeEventDetail

Param	Type	Descrtiption
direction	`number`	Direction
fullScreen	`number \| boolean`	Full Screen

onWaitingEventDetail

Param	Type	Description
direction	`number`	Direction
fullScreen	`number \| boolean`	Full Screen

onProgressEventDetail

Param	Type	Description
buffered	`number`	Percentage

API Support

API	WeChat Mini-Program	Baidu Smart-Program	Alipay Mini-Program	ByteDance Micro-App	H5	React Native
Video	✔️	✔️	✔️	✔️	✔️