vue + video.js 加载多种视频流(HLS、FLV、RTMP、RTSP)

起因: 由于需要在一个项目内接入多种常用的视频流,所以接触到video.js,这里就做个记录。

框架: vue2 + video.js + videojs-contrib-hls + videojs-flvjs-es6 + videojs-flash + video-js.swf

vue安装就不讲了,直接从项目开始了。

第一步:安装依赖

// video.js
npm install video.js
// 安装hls,用于播放 HLS
npm install  videojs-contrib-hls
// 安装flv,用于播放 FLV
npm install videojs-flvjs-es6
npm install flv.js
// 安装flash 用于播放 RTMP
npm install videojs-flash
npm install videojs-swf

依赖版本:

"flv.js": "^1.6.2",
"video.js": "^7.21.5",
"videojs-contrib-hls": "^5.15.0",
"videojs-flash": "^2.2.1",
"videojs-flvjs-es6": "^1.0.1",
"videojs-swf": "^5.4.2",

说明:比较重要,有很多坑

  1. 安装 videojs-swf 是因为 RTMP 必须用 flash 播放( RTMP 是由 Adobe 公司基于 Flash Player 播放器对应的音视频 FLV 封装格式提出的一种,基于TCP 的数据传输协议),video.js 里面使用 flash 是需要引入 swf 文件路径的,所以这里需要安装一下,方便引用,当然也可以自己下载后放在资源目录里面引用。
  2. 安装以上依赖的时候要注意,要用 npm 安装,在查资料的时候,发现有些文章说用 cnpm 安装会出现一些问题,不过我没遇到,不过为了避免还是慎重吧(毕竟像我这种学艺不精的,有些问题解决起来挺玄学的)。
  3. 针对 RTMP 的说明,截止目前(2023.08.30)Chrome浏览器(114版本)和 Microsoft Edge(116版本) 已经不支持 flash 了,反正我找了半天没找到设置的地方,最终还是在360浏览器上才勉强测试了 RTMP 的播放。
  4. 对于 videojs-flash 这个插件需要 video.js 版本的配合,如果版本不对,就会一直报错(The "flash" tech is undefined. Skipped browser support check for that tech.),解决方案是找到 videojs-flash 里面匹配的版本,然后更换 video.js 版本,就可以解决了,具体的方法,文章后面会详细介绍的。

第二步:引入依赖

import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import 'videojs-contrib-hls'
import 'videojs-flvjs-es6'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'

第三步:创建播放器(播放视频流)

html 部分

<template><div ref="videoPlayerBox" class="component"><video class="videoPlayer video-js"></video></div>
</template>

JS 部分

<template><div ref="videoPlayerBox" class="component"><video class="videoPlayer video-js"></video></div>
</template>
<script>
import { VueExtend } from 'vdrag-lib'
import videojs from 'video.js'
import 'video.js/dist/video-js.min.css'
import 'videojs-contrib-hls'
import 'videojs-flvjs-es6'
import 'videojs-flash'
import SWF_URL from 'videojs-swf/dist/video-js.swf'export default {data () {return {player: null,streamType: 'RTMP',streamURL: 'rtmp://mobliestream.c3tv.com:554/live/goodtv.sdp'}},watch: {streamType: function () {console.log('change streamType')this.$nextTick(() => {this.loadPlayer()})},streamURL: function () {console.log('change streamURL')this.$nextTick(() => {this.loadPlayer()})},},mounted () {this.initPlayer()},beforeDestroy () {this.disposePlayer()},methods: {// 初始化播放器initPlayer () {this.$nextTick(() => {let playerOption = {preload: 'auto', // 预加载autoplay: true, // 自动播放controls: true,techOrder: ['html5', 'flvjs', 'flash'], // 这里的顺序一定要 'flvjs' 在 'flash' 前面,要不然 flv 格式的就无法播放了// 如果报 app.js:242798 Uncaught TypeError: this.el_.vjs_getProperty is not a function 错误,只保留 'flash' 就不报错了// 报错 The "flash" tech is undefined. Skipped browser support check for that tech. 可以查看 videojs-flash 里面 node_modules 查看需要的 video.js 的版本,然后修改video.js的版本就可以了flash: {hls: { withCredentials: false },swf: SWF_URL // 引入静态文件swf},flvjs: {mediaDataSource: {cors: true,withCredentials: false,},},sources: [{src: this.streamURL,type: this.getType(this.streamType)}],}this.player = videojs(this.$el.querySelector('.videoPlayer'), playerOption, function onPlayerReady () {console.log('onPlayerReady', this)})})},// 重新加载播放器loadPlayer () {this.$refs.videoPlayerBox.innerHTML = `<video class="videoPlayer video-js"></video>`this.$nextTick(() => {this.initPlayer()})},// 销毁播放器disposePlayer () {if (this.player) {this.player.dispose()}},getType (type) {let playerType = ''switch (type) {case 'FLV':playerType = 'video/x-flv'breakcase 'HLS':playerType = 'application/x-mpegURL'breakcase 'RTMP':playerType = 'rtmp/flv'breakcase 'RTSP':playerType = 'video/mp4'break}return playerType}}
}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/73144.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软考高级架构师下篇-14面向服务架构设计理论

目录 1. 引言2. SOA的相关概念3. SOA的发展历史4. SOA的参考架构5. SOA 主要协议和规范6. SOA设计的标准要求7. SOA的作用与设计原则8. SOA的设计模式9. SOA构建与实施10. 前文回顾1. 引言 在面向服务的体系结构(Service-Oriented Architecture,SOA)中,服务的概念有了延伸…

使用EMgu检测人脸

1,安装EMgu 在NuGet中,查找并安装EMgu 2,做人脸检测 首先,声明几个重要的类 //Thread.Sleep(3000);matImg = new Mat();capture.Retrieve(matImg, 0); frame=new Image<Bgr, byte>(matImg.Bitmap); 当,frame != null时,检测到人脸 3,给人脸画框 i…

苹果macOS 13.5.2正式发布 修复ImageIO进程

9 月 8 日消息&#xff0c;苹果今日向 Mac 电脑用户推送了 macOS 13.5.2 更新&#xff08;内部版本号&#xff1a;22G91&#xff09;&#xff0c;本次更新距离上次发布隔了 21 天。 需要注意的是&#xff0c;因苹果各区域节点服务器配置缓存问题&#xff0c;可能有些地方探测到…

利用go多态实现一个简单工厂模式

go的多态只能用接口来实现&#xff0c;不能用嵌入结构体的继承方式来实现。 go的多态和java很像&#xff0c;结合下面代码中的例子很容易就能理解。 在下面代码中&#xff0c;我们定义了一个接口DatabaseConnection&#xff0c;代表着数据库连接。这个接口有三个具体实现&…

WordPress 提示“此站点遇到了致命错误”的解决方法

WordPress 提示“此站点遇到了致命错误”的解决方法 WordPress 网站博客提示“此站点遇到了致命错误。”如何解决&#xff1f;今天老唐不幸遇到了这个问题&#xff0c;搜了一下解决方法&#xff0c;发现致命错误原因有很多&#xff0c;所以需要先打开 WordPress 的 WP_DEBUG 功…

索尼 toio™ 应用创意开发征文 | 如何用Python控制Q宝进行机器人擂台赛

你是否曾经想过&#xff0c;如果能用编程来控制真实的物体&#xff0c;那该有多有趣&#xff1f;如果能让一个小方块按照你的指令来移动、旋转、闪烁&#xff0c;那该有多酷&#xff1f;如果能让一个小方块和其他小方块互动&#xff0c;那该有多神奇&#xff1f;这些想法&#…

编程语言的类型划分

汇编语言 低级语言&#xff0c;通过汇编器翻译成机器语言 MOV、PUSH、ADD等 特点&#xff1a; 对机器友好、执行效率高、移植性差。 人类操作不太方便&#xff0c;需要专业人员。 高级语言 C、C、Java、Python、Golang等 最终还是会转化成为机器语言。 执行过程划分 编译型 ●…

OpenText EnCase Endpoint Security 识别潜在的网络安全威胁并快速消灭威胁

如今&#xff0c;敏感数据丢失和 IT 系统中断是各类组织面临的最大危机。网络攻击频率不断攀升、修复成本日益增加以及响应时间延长都加剧了数据丢失的隐患。 OpenText EnCase Endpoint Security 的高效体现在能够加速检测恶意活动&#xff0c;并在其导致不可挽回的损失或丢失敏…

蓝桥杯官网练习题(斐波那契数列最大公约数)

题目描述 斐波那契数列满足F1F21&#xff0c;从 F3 开始有 FnFn−1Fn−2。 请你计算 GCD(F2020,F520)&#xff0c;其中GCD(A,B) 表示 A 和 B 的最大公约数。 输入描述 无。 输出描述 无。 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所…

springboot+vue社区水电管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于Spring Boot+Vue开发的社区水电表盘…

嵌入式IDE(2):KEIL中SCF分散加载链接文件详解和实例分析

在上一篇文章IAR中ICF链接文件详解和实例分析中&#xff0c;我通过I.MX RT1170的SDK中的内存映射关系&#xff0c;分析了IAR中的ICF链接文件的语法。对于MCU编程所使用的IDE来说&#xff0c;IAR和Keil用得比较多&#xff0c;所以这一篇文章就来分析一下Keil的分散文件.scf(scat…

【设计模式】组合模式实现部门树实践

1.前言 几乎在每一个系统的开发过程中&#xff0c;都会遇到一些树状结构的开发需求&#xff0c;例如&#xff1a;组织机构树&#xff0c;部门树&#xff0c;菜单树等。只要是需要开发这种树状结构的需求&#xff0c;我们都可以使用组合模式来完成。 本篇将结合组合模式与Mysq…

有哪些做流程图的软件?分享一些制作方法和注意事项

流程图是一种常用的图表&#xff0c;可以用于表示各种工作流程、系统架构、决策流程等。在现代工作生活中&#xff0c;制作流程图已经成为了必备的技能之一。本文将介绍一些常用的做流程图的工具&#xff0c;并分享一些制作方法和注意事项。 做流程图的工具 1.迅捷画图&#x…

解决 vue 项目开发越久 node_modules包越大的问题

vue 每次编译都会将编译后的文件缓存在 node_modules /.cache 里面&#xff0c;因此需要在 vue.config.js 配置取消缓存 compression-webpack-plugin 禁止缓存 const CompressionPlugin require("compression-webpack-plugin");module.exports {plugins: [new Com…

AI时代的较量,MixTrust能否略胜一筹?

人工智能的能力正在迅速接近人类&#xff0c;而在许多细分领域&#xff0c;已经超越了人类。虽然短期内这个突破是否会导致人工通用智能&#xff08;AGI&#xff09;还不清楚&#xff0c;但我们现在有的模型被训练成在数字交互中完美地模仿高能人类。尽管AGI仍不确定&#xff0…

配置 Windows 系统环境变量

直接按键盘上面的 WINS 打开 Windows 搜索 搜索“编辑系统环境变量” 也可以右键此电脑->属性->高级系统设置打开相同的界面 点击环境变量 一般添加就是添加在框出的 Path 里面&#xff0c;双击可以看到现有的环境变量并进行编辑 例如我在博客中写把 Java 的 jdk 解压好…

用 Python 微调 ChatGPT (GPT-3.5 Turbo)

用 Python 微调 ChatGPT (GPT-3.5 Turbo) 备受期待的 GPT-3.5 Turbo 微调功能现已推出&#xff0c;并且为今年秋季即将发布的 GPT-4 微调功能奠定了基础。 这不仅仅是一次简单的更新——它是一个游戏规则改变者&#xff0c;为开发人员提供了完美定制人工智能模型的关键解决方案…

【备忘】清理Office缓存

【背景】电脑安装了M365 Apps for enterprise的客户端&#xff0c;遇到不常见的奇怪问题。尝试看清理缓存是否可以解决。 【清理步骤】 1. 关闭所有Office365 应用&#xff1b; 2. 搜索 %AppData% &#xff0c;并打开该文件夹&#xff1b; 3. 进到 AppData > Local > M…

基本介绍——数据挖掘

1.数据挖掘的定义 数据挖掘是采用数学的、统计的、人工智能和神经网络等领域的科学方法&#xff0c;如记忆推理、聚类分析、关联分析、决策树、神经网络、基因算法等技术&#xff0c;从大量数据中挖掘出隐含的、先前未知的、对决策有潜在价值的关系、模式和趋势&#xff0c;并…

深度学习Tensorflow: CUDA_ERROR_OUT_OF_MEMORY解决办法

目前在用深度学习训练&#xff0c;训练中设置batch size后可以正常跑通&#xff0c;但是在训练一轮save_model时&#xff0c;总出现这个错误&#xff0c;即使我调batch size到1也依旧会报错。 发现是在 调用logger时出现问题。 查询后了解到是因为TensorFlow中的eager_executi…