当前位置: 首页 > 工具软件 > Flv.js > 使用案例 >

vue中播放flv格式视频(b站flv.js的使用)

臧亦
2023-12-01

1.下载flv.js

npm install --save flv.js

2.引用

import flvjs from 'flv.js/dist/flv.min.js'

完整代码

<template>
  <section>
      <video autoplay controls width="100%" height="500" src="" id="videoElement"></video>
  </section>
</template>

<script>
import flvjs from 'flv.js/dist/flv.min.js'
export default {
  name:'viewVideo',
  data() {
    return {
      src:'xxxxxx.flv'   //flv格式的地址
    };
  },
  mounted(){
    this.$nextTick(() => {
      this.createVideo();
    });    
  },
  methods: {
    createVideo(){
      if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement')
        var flvPlayer = flvjs.createPlayer({
          type: 'flv',
          url: this.src
        })
        flvPlayer.attachMediaElement(videoElement)
        flvPlayer.load()
        flvPlayer.play()
      }
    }
  },
};
</script>

<style lang="scss" scoped>

</style>

 类似资料: