vue flv播放器

<template>
  <div>
    <video id="videoElement"  class="flvplayer-app"></video>

   <button @click="play">
     播放
   </button>
      <button @click="pause">
          暂停
      </button>
  </div>

</template>

<script>

// import flvPlayer  from 'flvplayer'
import flvPlayer from 'flv.js'
export default {
  name: 'flv',
  data () {
    return {
        flvPlayer:null,
    }
  },
    props:{
        videoSrc:{
            type: String,
            // default: 'http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.flv'
        }
    },
  mounted () {
        if(flvPlayer.isSupported()){
            var videoElement = document.getElementById('videoElement')
            var videoSrc = this.videoSrc
            this.flvPlayer = flvPlayer.createPlayer({
                // url:"http://cyberplayerplay.kaywang.cn/cyberplayer/demo201711-L1.flv",
                url:videoSrc,
                type: 'flv',
            })
            this.flvPlayer.attachMediaElement(videoElement)
            this.flvPlayer.load()
        }
  },
  methods:{
    play(){
      this.flvPlayer.play();
    },
      pause(){
        this.flvPlayer.pause();
      }
  }
}
</script>

<style lang="less" scoped>

</style>

发布了177 篇原创文章 · 获赞 18 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_38331049/article/details/104716904