VideoContext

Introduction

The VideoContext instance can be obtained through dlt.createVideoContext.

VideoContext is bound to a native-video component or video through its id, allowing operations on the corresponding native-video component or video component.

Usage Limitations

The minimum basic library version for operating the VideoContext instance methods of the native-video component is 4.0.0. Please ensure compatibility.

The minimum basic library version for operating the VideoContext instance methods of the video component is 5.1.1. Please ensure compatibility.

Methods

• VideoContext.play(): Play the video.
• VideoContext.pause(): Pause the video.
• VideoContext.stop(): Stop the video.
• VideoContext.seek(number position): Jump to a specific position in the video.
• VideoContext.playAndseek(number position): Jump to a specific position and start playing.
• VideoContext.requestFullScreen(Object object): Enter full-screen mode.
• VideoContext.exitFullScreen(Object object): Exit full-screen mode.

Sample Code

<!--index.dlt-->
<native-video :src="src" id="myVideo"></native-video>

<view bind:tap="triggerPlay"> Play </view>
<view bind:tap="triggerPause"> Pause </view>
<view bind:tap="triggerStop"> Stop </view>
<view bind:tap="triggerFullscreen"> Enter Full-Screen </view>
<view bind:tap="triggerSeek"> Jump to a Specific Position </view>

// index.js
Page({
  data: {
    src: 'xxxx.mp4',
  },
  onLoad() {
    this.videoContext = dlt.createVideoContext('myVideo');
  },
  // Use videoContext to control video playback
  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 full-screen mode after 5 seconds
    setTimeout(() => {
      this.videoContext && this.videoContext.exitFullScreen();
    }, 5000);
  },
  triggerSeek() {
    // Set the playback position to 10 seconds
    this.videoContext && this.videoContext.seek(10);
  },
});

This code demonstrates how to use the VideoContext instance to control video playback within your application.