examples/vue/components/video.vue

<template>
  <scroller>
    <video class="video" onpause="onpause" onstart="onstart" onfinish="onfinish" onfail="onfail"
           src="http://g.tbcdn.cn/ali-wireless-h5/res/0.0.6/toy.mp4"
           auto-play="true" :playStatus="playStatus">
    </video>
    <div style="flex-direction: row; justify-content: center;">
      <button value="Pause" @click.native="pause"></button>
      <button value="Play" @click.native="play" type="primary" style="margin-left:20px;"></button>
    </div>
  </scroller>
</template>

<style scoped>
  .video {
    width: 750px;
    height: 460px;
    margin-bottom: 80px;
  }
</style>

<script>
  var modal = weex.requireModule('modal')
  module.exports = {
    data: function () {
      return {
        playStatus: 'play'
      }
    },
    components: {
      button: require('../include/button.vue')
    },
    methods: {
      pause: function() {
        this.playStatus = 'pause'
        modal.toast({ 'message': 'click pause' })
      },
      play: function() {
        this.playStatus = 'play'
        modal.toast({ 'message': 'click play' })
      },
      onpause: function(e) {
        this.playStatus = e.playStatus
        modal.toast({ 'message': 'video pause' })
      },
      onstart: function(e) {
        this.playStatus = e.playStatus
        modal.toast({ 'message': 'video start' })
      },
      onfinish: function(e) {
        this.playStatus = e.playStatus
        modal.toast({ 'message': 'video finish' })
      },
      onfail: function(e) {
        this.playStatus = e.playStatus
        modal.toast({ 'message': 'video fail' })
      }
    }
  };
</script>