video.js 在vue中的使用

最新推荐文章于 2025-03-26 20:03:31 发布

寻水的鱼lj

最新推荐文章于 2025-03-26 20:03:31 发布

阅读量1.9k

点赞数 1

分类专栏： js 文章标签： js rtmp

本文链接：https://blog.youkuaiyun.com/qq_42081843/article/details/107575986

版权

本文介绍了如何在Vue项目中使用video.js和flv.js播放FLV视频流。video.js需要额外安装videojs-flash和videojs-contrib-hls插件，并在main.js中引入。为避免错误需在更换视频源前销毁原有实例。flv.js是哔哩哔哩开发的用于HTML5直播的库，同样可在HTML或JS中初始化，并提供了丰富的配置选项。

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

video.js 和flv.js 直播播放flv视频

H5 的video标签并不支持flv格式的视频，毕竟flash马上就要废弃了，记录使用video.js和flv.js的坑

video.js

官网文档： https://docs.videojs.com/
videojs最新版本已经将核心库和辅助库已经剥离开来, 低版本包含flash插件，比较新的版本我们要播放rtmp流和hls流需要另外安装它的两个插件videojs-flash和videojs-contrib-hls

我的使用背景：用vue-cli 搭的脚手架，vue项目

安装

npm install video.js -S

安装两个插件videojs-flash和videojs-contrib-hls

npm install videojs-flash videojs-contrib-hls -S

Vue工程中的主入口main.js进行引入

// src/main.js => 主入口文件

import Vue from 'vue';
...

// 引入videojs
import Video from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = video; // 在原型上注册

同样我们需要在主入口文件main.js中引入

// src/main.js => 主入口文件

import Vue from 'vue';
...

// 引入videojs
import Video from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.</

最低0.47元/天解锁文章