Native Video Component

Introduction

Non-hierarchical native video component

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

Properties

Property Name	Type	Default Value	Required	Description	Minimum Version
src	string		Yes	The resource address of the video to be played, supports network paths and local temporary paths	4.0.0
loop	boolean	false	No	Whether to loop the playback	4.0.0
muted	boolean	false	No	Whether to play the video muted	4.0.0
autoplay	boolean	false	No	Whether to autoplay the video	4.0.0
poster	string		No	Resource address of the video cover image	4.0.0
direction	number	0	No	Set the fullscreen direction; 0: normal vertical; 90: screen rotated counterclockwise 90 degrees; -90: screen rotated clockwise 90 degrees	4.0.0
initial-time	number	0	No	Specify the initial playback position of the video	4.0.0
cache	boolean	false	No	Whether to cache the video	4.0.0
bindplay	eventhandle		No	Triggered when playback starts/resumes (play event)	4.0.0
bindpause	eventhandle		No	Triggered when playback is paused (pause event)	4.0.0
bindended	eventhandle		No	Triggered when the video reaches the end (ended event)	4.0.0
bindtimeupdate	eventhandle		No	Triggered when the playback progress changes; event.detail = {currentTime, duration}. Frequency of 250ms	4.0.0
bindwaiting	eventhandle		No	Triggered when the video is buffering	4.0.0
binderror	eventhandle		No	Triggered when an error occurs during video playback	4.0.0
bindprogress	eventhandle		No	Triggered when the loading progress changes; supports only one segment of loading	4.0.0
bindloadedmetadata	eventhandle		No	Triggered when video metadata is loaded; event.detail = {width, height, duration}	4.0.0
bindseekcomplete	eventhandle		No	Triggered when seeking is complete	4.0.0
createdsuccess	eventhandle		No	Returned after the video component is created; event.createdsuccess = true: creation successful; event.createdsuccess = false: creation failed	4.0.0

Usage Example

<!--index.dlt-->
<native-video
  data-url="data--url--content"
  data-content="data--detail-content"
  id="myVideo"
  :autoplay="autoplay"
  :poster="poster"
  :src="src"
  bind:bindplay="bindplay"
  bind:bindpause="bindpause"
  bind:bindended="bindended"
  bind:binderror="binderror"
  bind:bindtimeupdate="bindtimeupdate"
  bind:createdsuccess="createdsuccess"
  >
</native-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="triggerSeek">Jump to Specific Position</view>

// index.js
Page({
  data: {
    autoplay: true,
    src: '/images/big_buck_bunny.mp4',
    poster: '/images/test.png',
  },
  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);
  },
  createdsuccess(event) {
    console.log('createdsuccess result:', event.createdsuccess); // createdsuccess result:true
    console.log('createdsuccess target:', event.target); // Video element DOM information
  },
  triggerPlay() {
    this.videoContext && this.videoContext.play();
  },
  triggerPause() {
    this.videoContext && this.videoContext.pause();
  },
  triggerStop() {
    this.videoContext && this.videoContext.stop();
  },
  triggerSeek() {
    // Set playback progress to 10 seconds
    this.videoContext && this.videoContext.seek(10);
  },
});

Error Code Correspondence

errCode	Meaning
-1	STATE_ERROR
-2	STATE_NETWORK_ERROR
-3	STATE_PARSE_ERROR
-4	STATE_URL_NULL