<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" play-status="{{playStatus}}">
    </video>
    <div style="flex-direction: row; justify-content: center;">
      <wxc-button value="Pause" onclick="{{pause}}"></wxc-button>
      <wxc-button value="Play" onclick="{{play}}" type="primary" style="margin-left:20px;"></wxc-button>
    </div>
  </scroller>
</template>

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

<script>
  require('weex-components');
  module.exports = {
    data: {
      playStatus: 'play'
    },
    methods: {
      pause: function() {
        this.playStatus = 'pause'
      },
      play: function() {
        this.playStatus = 'play'
      },
      onpause: function(e) {
        this.$call('modal', 'toast', {'message': 'video pause'});
      },
      onstart: function(e) {
        this.$call('modal', 'toast', {'message': 'video start'});
      },
      onfinish: function(e) {
        this.$call('modal', 'toast', {'message': 'video finish'});
      },
      onfail: function(e) {
        this.$call('modal', 'toast', {'message': 'video fail'});
      }
    }
  };
</script>