阿里云赞助

<video>

<video>

v0.6.1+

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.

Attributes

  • 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.

Styles

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.

Events

  • 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.

example

<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>

try it

Apache Incubator
Disclaimer: Apache Weex is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Apache Incubator. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.


ApacheCopyright(c) 2017 The Apache Software Foundation. Licensed under the Apache License, Version 2.0