title: type: references group: Build-in Components order: 8.25 version: 2.1
<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.
- poster: <string> v0.18+ & iOS only Post image URL of this video if any.
- controls: <string> v0.19+ If set to ‘nocontrols’, native video component will hide its play-back control panel.
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