<template>
  <div id="app">
    <test />
    <img alt="Vue logo" src="./assets/logo.png">
    <video id="myvideo" @click="click"></video>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import test from './components/test.vue'
import flv from 'flv.js'

export default {
  name: 'app',
  components: {
    HelloWorld,
    test
  },
  data(){return{
    player : null,
    playing: false,
  }},
  created(){
    if(flv.isSupported()){
      this.player = flv.createPlayer({
        type: 'flv',
        url: '/rap.flv'
      });
    }
  },
  mounted()
  {
    var video = document.querySelector('#myvideo')
    this.player.attachMediaElement(video)
    this.player.load()
  },
  methods:{
    click(){
      if(this.playing)
      {
        this.player.pause()
        this.playing = false;
      }
      else
      {
        this.player.play()
        this.playing = true;
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

#p
{
  width:1000px;
}
</style>