From 37fcf20277ea4dc0ed4f8f0eb5821387f24c2199 Mon Sep 17 00:00:00 2001 From: wusongqing Date: Mon, 16 Aug 2021 17:07:13 +0800 Subject: [PATCH] Added English version of video Signed-off-by: wusongqing --- en/application-dev/ui/video.md | 210 +++++++++++++++++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 en/application-dev/ui/video.md diff --git a/en/application-dev/ui/video.md b/en/application-dev/ui/video.md new file mode 100644 index 0000000000..67bfc186ea --- /dev/null +++ b/en/application-dev/ui/video.md @@ -0,0 +1,210 @@ +# video + +- [Child Components](#zh-cn_topic_0000001058670744_section9288143101012) +- [Attributes](#zh-cn_topic_0000001058670744_section2907183951110) +- [Events](#zh-cn_topic_0000001058670744_section3892191911214) +- [Methods](#zh-cn_topic_0000001058670744_section45171131134215) +- [Example](#zh-cn_topic_0000001058670746_section16867208402) + +The <video> component provides a video player. + +## Child Components + +Not supported. + +## Attributes + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Type

+

Default Value

+

Mandatory

+

Description

+

src

+

string

+

-

+

No

+

Path of the video to play.

+

muted

+

boolean

+

false

+

No

+

Whether the video is muted.

+

autoplay

+

boolean

+

false

+

No

+

Whether the video is automatically played.

+

controls

+

boolean

+

true

+

No

+

Whether to display the video playback control bar. The value **false** means not to display the control bar, and **true** means that the display of the control bar is controlled by the system. The default value is **true**.

+
+ +## Events + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

start

+

-

+

Triggered when video playback starts.

+

pause

+

-

+

Triggered when video playback is paused.

+

finish

+

-

+

Triggered when video playback is finished.

+

error

+

-

+

Triggered when video playback fails.

+

seeking

+

{ currenttime: value(s) }

+

Time reported when the seek bar is being manipulated, in seconds.

+

seeked

+

{ currenttime: value(s) }

+

Time reported when the seek operation completes, in seconds.

+

timeupdate

+

{ currenttime: value(s) }

+

Current video playback time (in seconds) reported when the playback progress changes. This time is reported every 250 ms.

+
+ +## Methods + + + + + + + + + + + + + + + + + + + + +

Name

+

Parameter

+

Description

+

start

+

-

+

Starts video playback.

+

pause

+

-

+

Pauses video playback.

+

setCurrentTime

+

{ currenttime: value(s) }

+

Sets the seek position of the video.

+
+ +## Example + +``` + +
+ +
+``` + +``` +/* xxx.js */ +export default { + data: { + event:'', + seekingtime:'', + timeupdatetime:'', + seekedtime:'', + isStart: true, + }, + startCallback:function(){this.event = 'Video playback starts.';}, + pauseCallback:function(){this.event = 'Video playback is paused.';}, + finishCallback:function(){this.event = 'Video playback is finished.';}, + errorCallback:function(){this.event = 'Video playback fails.';}, + seekingCallback:function(e){ this.seekingtime = e.currenttime; }, + timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;}, + change_start_pause: function() { + if(this.isStart) { + this.$element('videoId').pause(); + this.isStart = false; + } else { + this.$element('videoId').start(); + this.isStart = true; + } + } +} +``` -- GitLab