flv.js的实例demo 使用vue

以下是一个使用Vue和flv.js的简单示例demo：

<template>
  <div>
    <video ref="videoPlayer" :src="flvUrl" @canplay="handleCanPlay" @play="handlePlay"></video>
    <button v-if="!isPlaying" @click="play">播放</button>
    <button v-else @click="pause">暂停</button>
  </div>
</template>

<script>
import flvjs from 'flv.js'

export default {
  data () {
    return {
      flvUrl: 'http://example.com/example.flv',
      isPlaying: false
    }
  },
  methods: {
    play () {
      this.$refs.videoPlayer.play()
    },
    pause () {
      this.$refs.videoPlayer.pause()
    },
    handleCanPlay () {
      console.log('可以播放了')
    },
    handlePlay () {
      this.isPlaying = true
    }
  },
  mounted () {
    if (flvjs.isSupported()) {
      const videoElement = this.$refs.videoPlayer
      const flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: this.flvUrl
      })
      flvPlayer.attachMediaElement(videoElement)
      flvPlayer.load()
    }
  }
}
</script>

在这个示例中，我们首先引入了flv.js，然后在mounted生命周期中，创建了一个flv.js实例，并将其附加到video元素上。当video元素可以播放时，我们将触发handleCanPlay方法，并在handlePlay中将isPlaying属性设置为true。

然后我们在模板中渲染了一个video元素和两个按钮，一个用于播放，另一个用于暂停。当用户点击播放按钮时，我们调用video元素的play方法，当用户点击暂停按钮时，我们调用video元素的pause方法。

这个示例非常简单，但它演示了如何在Vue中使用flv.js来实现视频播放。