vue使用B站开源播放器flv.js和原生video实现视频直播,播放

最新推荐文章于 2026-05-09 13:51:12 发布

原创最新推荐文章于 2026-05-09 13:51:12 发布 · 置顶 · 4.1k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue #html5

vue 专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用FLV.js库在网页中实现视频播放功能，包括视频元素的初始化、播放控制及事件监听等关键步骤。

flv.js

<template>
  <div class="flv_box">
  <video id="myvideo" controls  autoplay muted></video>
  <button @click="onClick()">播放</button>
   <button @click="clickStop()">暂停</button>
  </div>
</template>

<script>
import flv from 'flv.js';
export default {
    name:'flv',
  components:{},
   data(){return{
    player : null,
    playing: false,
  }},
  created(){
    if(flv.isSupported()){
      this.player = flv.createPlayer({
        // type: 'flv',
          type: "video/mp4",
        url:'xxxxxx'   //获取视频播放资源路径
      });
    }
  },
  mounted()
  {
    var video = document.querySelector('#myvideo')
    this.player.attachMediaElement(video)
    this.player.load()
  },
  methods:{
    onClick(){
      console.log('播放')
        this.player.play()
        this.playing = true;
    },
    clickStop(){
        console.log('暂停')
        this.player.pause()
        this.playing = false;
    }
  }
}
</script>
<style lang="scss" scoped>
.flv_box{
    width: 100%;
    height: 100vh;
    #myvideo{
      width: 100%;
      height: 400px;
    }
}
</style>

video

<template>
  <div class="box">
    <div v-on:click="playVideo()">
      <video :src="videoSrc" controls id="videoPlay" v-show="true" class="video">您的浏览器不支持 video 视屏播放。</video>
    </div>
  </div>
</template>

<script>
export default {
    name:'videoList',
  components: {},
  data() {
    return {
      videoSrc: "xxxxxxxx", //获取视频播放资源路径
    };
  },
  created() {},
  computed: {},
  methods: {
    playVideo() {
        console.log('播放')
      var vdo = document.getElementById("videoPlay");
      vdo.play();
      console.log(vdo)
      console.log(this)
    },

  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  video{
      width: 100%;
      height: 400px;
  }
}
</style>