The video component can be used to embed video content in a weex page.

Child Components#

  • text is the only valid type of child component.


  • src: <string> The URL of the video to embed.
  • play-status: <boolean> play | pause. Use it to control video’s play/pause status. Default value is pause.
  • auto-play: <boolean> true | false. Use it to control whether it is playing when the page initialization finished. Defalut value is false.


common styles: check out common styles for components

  • support flexbox related styles
  • support box model related styles
  • support position related styles
  • support opacity, background-color etc.


  • onstart: triggered when playback state is Playing.
  • onpause: triggered when playback state is Paused.
  • onfinish: triggered when playback state is Finished.
  • onfail: triggered when playback state is Failed.


<video class="video" :src="src" autoplay controls
@start="onstart" @pause="onpause" @finish="onfinish" @fail="onfail"></video>
<text class="info">state: {{state}}</text>

<style scoped>
.video {
width: 630px;
height: 350px;
margin-top: 60px;
margin-left: 60px;
.info {
margin-top: 40px;
font-size: 40px;
text-align: center;

export default {
data () {
return {
state: '----',
onstart (event) {
this.state = 'onstart'
onpause (event) {
this.state = 'onpause'
onfinish (event) {
this.state = 'onfinish'
onfail (event) {
this.state = 'onfinish'

try it

Edit this page on GitHub