vue播放flv视频流

简介:flv.js是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 Flash。由 bilibili 网站开源。

开源地址: https://github.com/Bilibili/flv.js/

1、安装依赖

javascript 复制代码
npm install --save flv.js

2、页面引入插件

javascript 复制代码
import flvjs from 'flv.js'

3、完整代码

javascript 复制代码
<!-- flv格式 -->
<template>
  <div>
    <video
      id="myPlayer"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
    ></video>
  </div>
</template>

<script>
import flvjs from "flv.js";
export default {
  name: "videoFlv",
  data() {
    return {
      url: "/flv/source.flv",
      videoExample: null,
    };
  },
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.getVideo();
    });
  },
  beforeDestroy() {
    this.videoDestroy();
  },
  methods: {
    getVideo() {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById("myPlayer");
        this.videoExample = flvjs.createPlayer({
          type: "flv", //类型
          isLive: true, //是否实时流
          // url: '/flv/source.flv', //路径
          url: this.videoUrl, //路径
          // segments: [], //多段播放
        });
        this.videoExample.attachMediaElement(videoElement);
        this.videoExample.load();
        this.videoExample.play();
      }
    },
    // 销毁实例
    videoDestroy() {
      if (this.videoExample) {
        this.videoExample.pause();
        this.videoExample.unload();
        this.videoExample.detachMediaElement();
        this.videoExample.destroy();
        this.videoExample = null;
      }
    },
  },
};
</script>

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

参考:

https://blog.csdn.net/weixin_43883951/article/details/131065700

https://blog.csdn.net/weixin_51714170/article/details/128060019?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword\~default-0-128060019-blog-127852222.235^v43^control\&spm=1001.2101.3001.4242.1\&utm_relevant_index=3

相关推荐
秋田君3 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
爱隐身的官人3 分钟前
ctfshow - web - nodejs
前端·nodejs·ctf
zhong liu bin3 分钟前
Vue框架技术详解——项目驱动概念理解【前端】【Vue】
前端·javascript·vue.js·vscode·vue
W-GEO4 分钟前
前端安全攻防:XSS, CSRF 等常见威胁的防范与检测指南
前端·安全·xss
2301_803554527 分钟前
实习项目包装--HTTP 协议和 Web API
前端·网络协议·http
lssjzmn8 分钟前
Spring Web 异步响应实战:从 CompletableFuture 到 ResponseBodyEmitter 的全链路优化
java·前端·后端·springboot·异步·接口优化
这里有鱼汤8 分钟前
上班族没时间炒股?不妨试试这个隔夜超短战法(附:Python量化源码)
前端
n123523515 分钟前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
前端 贾公子22 分钟前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐22 分钟前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui