colexiu-website/src/components/video/index.vue

<template>
  <div>
    <video ref='plyr'
           class='c-plyr'
           :style="!isFull ? {'width': width+'px','height': height+'px'} : {}"
           controls
           autoplay
           :src="src"
           loop>
    </video>
  </div>
</template>
<script>
import Plyr from 'plyr'
import 'plyr/dist/plyr.css'
export default {
  props: ['width', 'height', 'src'],
  data () {
    return {
      isFull: false
    }
  },
  mounted () {
    let plyr = new Plyr(this.$refs.plyr, {
      autoplay: true,
      muted: true,
    })
    plyr.on('enterfullscreen', this.enterfullscreen)
    plyr.on('exitfullscreen', this.exitfullscreen)
  },
  watch: {
    src (val) {
      // console.log(val)
      // console.log(this.width, this.height)
    }
  },
  methods: {
    enterfullscreen () {
      this.isFull = true
    },
    exitfullscreen () {
      this.isFull = false
    },
  }
}
</script>

<style lang="less" scoped>
</style>