vue播放在线flv视频

最新推荐文章于 2024-08-13 16:48:56 发布

毛三仙

最新推荐文章于 2024-08-13 16:48:56 发布

阅读量583

点赞数

分类专栏：大屏文章标签：音视频

本文链接：https://blog.csdn.net/m0_74149462/article/details/130146381

版权

大屏专栏收录该内容

21 篇文章

订阅专栏

该文章展示了一个Vue组件，利用flv.js库在HTML5中播放FLV格式的视频。代码示例包括创建播放器实例，加载和播放视频流，并处理播放器的生命周期，确保在组件销毁时正确清理资源。视频源来自一个示例URL，实际使用时需替换为自己的FLV视频流。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

GitHub - bilibili/flv.js: HTML5 FLV Player

cnpm install --save flv.js

<!--
 * @Description: vueb播放在线flv视频
 * @Author: mhf
 * @Date: 2023-04-11 20:35:52
-->
<template>
  <div>
 
        <video
          id="videoElement"
          controls
          autoplay
          muted
          width="300px"
          height="200px"
        ></video>

        <hr />
        <el-button @click="play" type="primary">播放</el-button>
    
  </div>
</template>

<script>
import flvjs from "flv.js";

export default {
  name: "flvComp",
  components: {},
  props: {},
  data() {
    return {
      flvPlayer: null,
    };
  },
  methods: {
    play() {
      this.flvPlayer.play();
    },
  },
  created() {},
  mounted() {
    if (flvjs.isSupported()) {
      var videoElement = document.getElementById("videoElement");
      this.flvPlayer = flvjs.createPlayer({
        type: "flv",
        isLive: true,
        hasAudio: false,
        url: "https://sf1-hscdn-tos.pstatp.com/obj/media-fe/xgplayer_doc_video/flv/xgplayer-demo-360p.flv", // 自己的flv视频流
     });
      this.flvPlayer.attachMediaElement(videoElement);
      this.flvPlayer.load();
      this.flvPlayer.play();
    }
  },
  destroyed() {
    this.flvPlayer.pause();
    this.flvPlayer.unload();
    this.flvPlayer.detachMediaElement();
    this.flvPlayer.destroy();
    this.flvPlayer = null;
  }
};
</script>

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

注：以上代码必须能播，如果出现