video - Video Component

Description

The video component is used to display and play videos.

Starting from the basic library version 5.1.1, you can use dlt.createVideoContext to manipulate the video component.

Properties

Property Name	Type	Default Value	Required	Description	Minimum Version
src	string		Yes	The resource URL of the video to be played. It supports both network paths and local temporary paths.	2.0.0
loop	boolean	FALSE	No	Specifies whether the video should loop playback.	2.0.0
muted	boolean	FALSE	No	Specifies whether the video should be muted.	2.0.0
controls	boolean	TRUE	No	Specifies whether to display the default playback controls (play/pause button, progress, time).	2.0.0
autoplay	boolean	FALSE	No	Specifies whether the video should start playing automatically.	2.0.0
poster	string		No	The resource URL of the video's cover image. Setting poster has no effect if the controls property is set to false.	2.0.0
show-fullscreen-btn	boolean	TRUE	No	Specifies whether to display the fullscreen button.	2.0.0
bindplay	eventhandle		No	Triggered when the video starts or resumes playing.	2.0.0
bindpause	eventhandle		No	Triggered when the video is paused.	2.0.0
bindended	eventhandle		No	Triggered when the video reaches the end.	2.0.0
bindtimeupdate	eventhandle		No	Triggered when the playback progress changes. event.detail = {currentTime, duration}. Triggered every 250ms.	2.0.0
bindfullscreenchange	eventhandle		No	Triggered when the video enters or exits fullscreen mode. event.detail = {fullScreen, direction}, where direction can be "vertical" or "horizontal".	2.0.0
bindwaiting	eventhandle		No	Triggered when the video is buffering.	2.0.0
binderror	eventhandle		No	Triggered when an error occurs during video playback.	2.0.0
bindprogress	eventhandle		No	Triggered when the loading progress changes. Only supports one segment of loading.	2.0.0
bindloadedmetadata	eventhandle		No	Triggered when the video metadata is loaded. event.detail = {width, height, duration}.	2.0.0
bindcontrolstoggle	eventhandle		No	Triggered when the controls are toggled (show/hide).	2.0.0
bindseekcomplete	eventhandler		No	Triggered when seeking is completed (Triggered when the user has finished dragging the progress bar).	2.0.0
bindmutedchange	eventhandler		No	Triggered when the video mute status changes. event.detail = {muted: true}, where muted is true if the video is currently muted, and false otherwise.	3.6.0

Usage Example

<!-- index.dlt -->
<video
  :object-fit="objectFit"
  :autoplay="autoplay"
  :src="src"
  :show-fullscreen-btn="showFullscreenBtn"
  bind:bindplay="bindplay"
  bind:bindpause="bindpause"
  bind:bindended="bindended"
  bind:binderror="binderror"
  bind:bindtimeupdate="bindtimeupdate"
  bind:bindfullscreenchange="bindfullscreenchange"
  data-url="data--url--content"
  data-content="data--detail-content"
  id="myVideo"
></video>

<view bind:tap="triggerPlay">Click to Play</view>
<view bind:tap="triggerPause">Click to Pause</view>
<view bind:tap="triggerStop">Click to Stop</view>
<view bind:tap="triggerFullscreen">Click to Enter Fullscreen</view>
<view bind:tap="triggerSeek">Jump to Specific Position</view>

// index.js
Page({
  data: {
    loop: true,
    controls: false,
    autoplay: true,
    muted: true,
    src: '/images/big_buck_bunny.mp4',
    poster: '/images/test.png',
    objectFit: 'cover',
    showFullscreenBtn: false,
  },
  onReady() {
    console.log('page ready');
    this.videoContext = dlt.createVideoContext('myVideo');
  },
  bindplay(event) {
    console.log('bindplay', event);
  },
  bindpause(event) {
    console.log('bindpause', event);
  },
  bindended(event) {
    console.log('bindended', event);
  },
  binderror(event) {
    console.log('binderror', event);
  },
  bindtimeupdate(event) {
    console.log('bindtimeupdate', event);
  },
  bindfullscreenchange(event) {
    console.log('bindfullscreenchange', event);
  },
  triggerPlay() {
    this.videoContext && this.videoContext.play();
  },
  triggerPause() {
    this.videoContext && this.videoContext.pause();
  },
  triggerStop() {
    this.videoContext && this.videoContext.stop();
  },
  triggerFullscreen() {
    this.videoContext && this.videoContext.requestFullScreen({ direction: 0 });
    // Simulate exiting fullscreen after 5 seconds
    setTimeout(() => {
      this.videoContext && this.videoContext.exitFullScreen();
    }, 5000);
  },
  triggerSeek() {
    // Set playback progress to 10 seconds
    this.videoContext && this.videoContext.seek(10);
  },
});