All Products
Search
Document Center

Video

Last Updated: Feb 05, 2021

my.createVideoContext

You can call this interface to input video id and return a videoContext. video ID refers to the ID attribute customized by the developer in the corresponding video tab.

You can operate a video component through videoContext.

Version requirement: Base library V1.14.1 or later versions.

Effect

createVideoContext

Sample code

Write the following code to name a video id in .axml file. video ID refers to the ID attribute customized by the developer in the corresponding video tab, such as myVideo in the following code.

  1. <view>
  2. <! -- If the type of onPlay is EventHandle, the play event will be triggered when you start or continue playing. -->
  3. <video id="myVideo" src="{{src}}" onPlay="{{onPlay}}" enableNative="{{true}}"></video>
  4. <button type="default" size="defaultSize" onTap="play"> Play </button>
  5. <button type="default" size="defaultSize" onTap="pause"> Pause </button>
  6. <button type="default" size="defaultSize" onTap="stop"> stop </button>
  7. <button type="default" size="defaultSize" onTap="seek"> seek </button>
  8. <button type="default" size="defaultSize" onTap="requestFullScreen"> requestFullScreen </button>
  9. <button type="default" size="defaultSize" onTap="exitFullScreen"> exitFullScreen </button>
  10. <button type="default" size="defaultSize" onTap="mute"> mute </button>
  11. </view>

Write the following code in the .js file:

  1. Page({
  2. data: {
  3. // src is the resource address of the video you want to play. Src supports apFilePath: https://resource/xxx.video.
  4. src: "http://flv.bn.netease.com/tvmrepo/2012/7/C/7/E868IGRC7-mobile.mp4",
  5. },
  6. onLoad() {
  7. this.videoContext = my.createVideoContext('myVideo');
  8. },
  9. play() {
  10. this.videoContext.play();
  11. },
  12. pause() {
  13. this.videoContext.pause();
  14. },
  15. stop() {
  16. this.videoContext.stop();
  17. },
  18. seek() {
  19. this.videoContext.seek(100);
  20. },
  21. requestFullScreen() {
  22. this.videoContext.requestFullScreen({
  23. direction: 0
  24. });
  25. },
  26. exitFullScreen() {
  27. this.videoContext.exitFullScreen();
  28. },
  29. mute() {
  30. this.videoContext.mute(false);
  31. },
  32. });

videoContext methods

Method Parameter Type Description
play None - Play.
pause None - Pause.
stop None - Stop.
seek position Number Redirect to the specific position. The unit is second.
requestFullScreen direction Number Enter full screen mode.
  • 0 is vertical screen.
  • 90 is horizontal screen.
  • -90 is reversed horizontal screen.
exitFullScreen None - Exit full screen mode.
showStatusBar None - Show status bar. The method only works in full screen mode in iOS App.
hideStatusBar None - Hide status bar. The method only works in full screen mode in iOS App.
mute ison Boolean Switch to mute status.
playbackRate rate Number Set playback rate (0.5 ≤ rate ≤ 2.0). This method is not supported by mPaaS currently.
Note: To use iOS full screen, you need to check Landscape Left and Landscape Right in Xcode> General> Deployment Info, as shown below.

device orientation