简介

Weex中内置的<video>组件一般只做demo用途，在你的App中，你应该用你喜欢的视频库重新实现video组件。 Video 组件用于在页面中嵌入视频内容。

子组件

text 是唯一合法的子组件。

属性

• src , string. 内嵌的视频指向的URL。
• play-status , string. 可选值为 play | pause，用来控制视频的播放状态，play 或者 pause，默认值是 pause。
• auto-play , boolean. 当页面加载初始化完成后，用来控制视频是否立即播放，默认值是 false。
• poster , string, . 指定视频首图的图片链接。
• controls , string, . 可选值为 controls | nocontrols，控制视频播放组件是否显示回放控制面板，默认会显示，当指定为 nocontrols 时不显示回放控制面板。

样式

• 通用样式 支持所有通用样式。

事件

• start 当 playback 的状态是 Playing 时触发。
• pause 当 playback 的状态是 Paused 时触发。
• finish 当 playback 的状态是 Finished 时触发。
• fail 当 playback 状态是 Failed 时触发。

Vue 示例

  1. <template>
    2.   <div>
    3.     <video class="video" :src="src" autoplay controls
    4.       @start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
    5.     <text class="info">state: {{state}}</text>
    6.   </div>
    7. </template>
    8.   9. <style scoped>
    10.   .video {
    11.     width: 630px;
    12.     height: 350px;
    13.     margin-top: 60px;
    14.     margin-left: 60px;
    15.   }
    16.   .info {
    17.     margin-top: 40px;
    18.     font-size: 40px;
    19.     text-align: center;
    20.   }
    21. </style>
    22.   23. <script>
    24.   export default {
    25.     data () {
    26.       return {
    27.         state: '----',
    28.         src:'http://flv2.bn.netease.com/videolib3/1611/01/XGqSL5981/SD/XGqSL5981-mobile.mp4'
    29.       }
    30.     },
    31.     methods:{
    32.       onstart (event) {
    33.         this.state = 'onstart'
    34.       },
    35.       onpause (event) {
    36.         this.state = 'onpause'
    37.       },
    38.       onfinish (event) {
    39.         this.state = 'onfinish'
    40.       },
    41.       onfail (event) {
    42.         this.state = 'onfinish'
    43.       }
    44.     }
    45.   }
    46. </script>

• 示例
• 自动播放示例
• 手动控制示例

Rax 示例

rax-video 是 <video> 组件的上层封装，抹平了 Web 和 Weex 的展现 1. import { createElement, Component, render } from "rax"; 2. import Video from "rax-video"; 3. import Driver from "driver-universal"; 4. 5. render( 6. <Video 7. style={{ width: '750rpx', height: '400rpx' }} 8. autoPlay 9. src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4" 10. />, 11. document.body, 12. { driver: Driver } 13. );

rax-video 文档