You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@weex.apache.org by zs...@apache.org on 2018/12/14 06:12:24 UTC
[incubator-weex-site] branch draft updated: Update video.md
This is an automated email from the ASF dual-hosted git repository.
zshshr pushed a commit to branch draft
in repository https://gitbox.apache.org/repos/asf/incubator-weex-site.git
The following commit(s) were added to refs/heads/draft by this push:
new c252023 Update video.md
c252023 is described below
commit c25202326969b26da36e4627dd3be1501cd1de51
Author: zshshr <zh...@gmail.com>
AuthorDate: Fri Dec 14 14:12:21 2018 +0800
Update video.md
---
docs/docs/components/video.md | 110 +++++++++++++++++++++++++-----------------
1 file changed, 66 insertions(+), 44 deletions(-)
diff --git a/docs/docs/components/video.md b/docs/docs/components/video.md
index b980546..cf128fa 100644
--- a/docs/docs/components/video.md
+++ b/docs/docs/components/video.md
@@ -1,62 +1,84 @@
-# <video>
+---
+title: <video>
+type: references
+group: Build-in Components
+order: 8.25
+version: 2.1
+---
-`<video>` 组件可以让我们在 Weex 页面中嵌入视频内容。**该组件只包含基础视频播放能力,如需复杂能力,建议自行实现。**
+The video component can be used to embed video content in a Weex page.
-::: warning
-- `<video>` 需要显式的设置其宽高样式,否则在 App 中无法渲染。
-:::
+## Child Components
+
+A `text` is the only valid type of child component.
+
+## Attributes
+
+* **src**, string. The URL of the video to embed.
+* **play-status**, string. Valid options are 'play' | 'pause'. Use it to control video's play status. Default value is `pause`。
+* **auto-play**, boolean. Use it to control whether it is playing when the page initialization finished. Defalut value is false.
+* **poster**, string, <span class="weex-version">v0.18+ & iOS</span>. Post image URL of this video if any.
+* **controls**, string, <span class="weex-version">v0.19+</span>. If set to `nocontrols`, native video component will hide its play-back control panel.
+
+## Styles
+
+* **common styles**. Check out [common styles for components](/wiki/common-styles.html).
+
+## Events
+
+* **start** Triggered when playback state is Playing.
+* **pause** Triggered when playback state is Paused.
+* **finish** Triggered when playback state is Finished.
+* **fail** Triggered when playback state is Failed.
+
+## example
```html
<template>
<div>
- <video class="video" :src="src" auto-play="true" @pause="onpause" controls="true"></video>
+ <video class="video" :src="src" autoplay controls
+ @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
+ <text class="info">state: {{state}}</text>
</div>
</template>
+<style scoped>
+ .video {
+ width: 630px;
+ height: 350px;
+ margin-top: 60px;
+ margin-left: 60px;
+ }
+ .info {
+ margin-top: 40px;
+ font-size: 40px;
+ text-align: center;
+ }
+</style>
+
<script>
export default {
data () {
return {
- src:'http://7xodnm.com1.z0.glb.clouddn.com/03000A01005A5363D9CB5F514325B3E6018933-6359-951A-945C-0D482B330E2A.mp4'
+ state: '----',
+ src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
+ }
+ },
+ methods:{
+ onstart (event) {
+ this.state = 'onstart'
+ },
+ onpause (event) {
+ this.state = 'onpause'
+ },
+ onfinish (event) {
+ this.state = 'onfinish'
+ },
+ onfail (event) {
+ this.state = 'onfinish'
}
}
}
</script>
-
-<style scoped>
- .video {
- width: 630px;
- height: 350px;
- }
-</style>
```
-
-## 子组件
-
-`<video>` 不支持子组件。
-
-## 属性
-
-| 参数 | 说明 | 类型 | 默认值 |
-| ---------- | ------------- | ----- | ----- |
-| `src` | 内嵌的视频指向的 URL | string | - |
-| `play-status` | 可选值为 `play`/`pause`,用来控制视频的播放状态 | string | pause |
-| `auto-play` | 当页面加载初始化完成后,用来控制视频是否立即播放 | boolean | false |
-
-::: warning
-部分浏览器禁止页面自动播放视频或音频,`auto-play` 属性在这些浏览器中将会失效。建议为 `<video>` 组件添加 `controls="true"` 的属性,该属性是 W3C 标准属性,在浏览器中生效,将显示 video 元素控制栏。
-:::
-
-## 事件
-
-- `start`: 当开始播放或从暂停状态继续播放时触发,事件回调参数为标准 `Event` 对象。
-- `pause`: 当暂停播放时触发,事件回调参数为标准 `Event` 对象。
-- `finish`: 当播放结束后触发,事件回调参数为标准 `Event` 对象。
-- `fail`: 当播放失败时触发,事件回调参数为标准 `Event` 对象。
-
-## Demo
-
-- [自动播放](http://dotwe.org/vue/342d32830f51f72df6acab21fb1c21bd)
-- [手动控制播放状态](http://dotwe.org/vue/7bdf54dce22def3d3850f65d95f5eac9)
-
- <IPhoneImg imgSrc="https://img.alicdn.com/tfs/TB1rqI5n9zqK1RjSZPxXXc4tVXa-750-1334.gif" />
\ No newline at end of file
+[try it](http://dotwe.org/vue/01d3d27073a471bb234b1a76e130d197)