::: danger Weex中内置的<video>
组件一般只做demo用途,在你的App中,你应该用你喜欢的视频库重新实现video组件。 :::
Video 组件用于在页面中嵌入视频内容。
text
是唯一合法的子组件。
play
| pause
,用来控制视频的播放状态,play
或者 pause
,默认值是 pause
。false
。controls
| nocontrols
,控制视频播放组件是否显示回放控制面板,默认会显示,当指定为 nocontrols
时不显示回放控制面板。<template> <div> <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 { 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>
rax-video
是 <video>
组件的上层封装,抹平了 Web 和 Weex 的展现
import { createElement, Component, render } from "rax"; import Video from "rax-video"; import Driver from "driver-universal"; render( <Video style={{ width: '750rpx', height: '400rpx' }} autoPlay src="https://cloud.video.taobao.com/play/u/2780279213/p/1/e/6/t/1/d/ld/36255062.mp4" />, document.body, { driver: Driver } );