vue2使用LivePlayer摄像头， 但是显示不出画面

最新推荐文章于 2025-05-22 09:24:20 发布
最新推荐文章于 2025-05-22 09:24:20 发布
阅读量992 收藏
点赞数 3
CC 4.0 BY-SA版权
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangnx10000/article/details/131556894
文章讲述了在处理.swf文件时遇到的依赖问题，特别是videojs的导入导致的冲突。解决方法是卸载引起冲突的包或重新安装liveplayer。对于局域网中的flv视频流，添加特定后缀&a=1.flv才能正常播放，单纯添加.flv无效。

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

首先它跳了一个关于.swf的问题，是依赖出现了问题，因为一开始它报错找不到videojs，所以我导入了一下，然后冲突了，把这个包卸载就好了，或者把liveplayer的包卸载后重新安装一下。
局域网发给我的格式是一个flv的视频流，所以后面加一个后缀'&a=1.flv'就好了，单纯加一个.flv没有效果

步致道
关注
Vue项目集成LivePlayer播放器
weixin_43415075的博客
04-22 4841
前言 视频播放器在视频监控项目中必不可少，虽然H5中提供了video标签，但是它不支持摄像头所提供的视频格式，故无法满足视频监控项目的需求。基于封装一款满足视频监控项目需求的视频播放器技术门槛相对较高，所以选择一款开源视频播放器是一种不错的选择。 ...
vue 使用flowplayer_livePlayer 在vue中使用
weixin_39676979的博客
12-22 1266
livePlayer的说明文档：https://www.liveqing.com/docs/manuals/LivePlayer.html#%E4%BA%8B%E4%BB%B6-event1、安装：npm install @liveqing/liveplayernpm i -D copy-webpack-plugin2、引入：在webpack.dev.conf.js / vue.config.js...
vue中使用@liveqing/liveplayer报错问题踩坑记录
killerdoubie的博客
10-17 3216
即可完美启动 但是这个插件不可以直接播放rtsp流 转化视频流过程中可能回出现延迟问题 如需解决请看下篇。1.安装插件copy-webpack-plugin 请下载这个版本 最开始直接下的最新版 起不来哈。3.在public/index.html 中引用 liveplayer-lib.min.js。1.安装@liveqing/liveplayer。2.在vue.config.js中如下配置。2.引入插件（这里是封装了视频组件）
Vue前端中展示监控摄像头视频流
最新发布
flamesfather的博客
05-22 1994
Vue前端中展示监控摄像头视频流
vue 视频监控插件，video无法正常播放解决方案
qq_40295815的博客
08-11 4209
<video :id="'roomVideo'" class="video-js vjs-default-skin vjs-big-play-centered" x-webkit-airplay="allow" webkit-playsinline playsinline x5-video-player-type="h5" x5-video-player-fullscreen="true" preload="auto" muted poster="@/assets/zhts/login_bg.jp.
LivePlayer播放器的基本用法
weixin_45774558的博客
02-09 5462
​1.安装 npm install @liveqing/liveplayer 2.在vue.config.js添加配置
LivePlayer 基本使用 （@liveqing/liveplayer）
c_qianxia5040的博客
09-07 5782
第一次用@liveqing/liveplayer，下载依赖，引入并注册组件，但一直报videojs is not defined，全局搜了，没有videojs，其实vidojs 已经在 livepayer 依赖js中，无需再次引入 下面来正确使用livePlayer 1、先下载依赖 npm install @liveqing/liveplayer 2、在vue.config.js添加配置 const CopyWebpackPlugin = require('copy-webpack-plugin');.
vue+flv.js+SpringBoot+websocket实现视频监控与回放
egegerhn的博客
07-31 2378
之前使用纯前端实现视频监控和回放时.浏览器时只支持IE.使用后端推流的方式实现视频监控和回放时.浏览器支持谷歌火狐Edge等.但是又不支持IE了.很有意思.但是这里我遇见一个坑.开发模式没有问题.但是打包之后发现ie浏览器报语法错误.不支持此引用.所以修改引用地址.由于是后端不停的拉流.所以流量和服务器压力比较大.可能同时打开多个监控.会出现卡顿的情况.需要注意.在webpack.base.conf.js的module.exports下添加。这里传的参数是设备初始化的时候得到的登录句柄.以及流数据....
Vue中调用LiverPlayer H5播放器实现萤石云视频监控
Yi_qian的博客
08-19 4077
首先，要播放实时监控的视频肯定需要获取播放地址官方文档上获取直播地址有两个接口 （新）（旧） 这里采用新接口2，接下来看接口文档上的参数，能看到必传的参数是accessToken 和 deviceSerial，然后获取到这两个参数调用接口能获取到播放的地址，后面的参数是控制视频显示，按需引入（记得检查拿取到的地址是否是rtmp格式）
【视频直播篇二】vue-cli3集成LivePlayer
一只没有脚的鸟
03-08 2452
关于LivePlayer的介绍请参考https://www.liveqing.com/docs/products/LiveQing.html 首先导入插件 npm install @liveqing/liveplayer --save-dev 然后把下面三个文件放入public目录 crossdomain.xml liveplayer.swf liveplayer-lib.min.js 还需要安装copy-webpack-plugin插件 npm install --save-dev copy-web
vue-video-group-component基于（vue2） element-ui 与 LivePlayer H5 播放器二次封装的视频组组件
weixin_44899321的博客
12-01 706
之前感兴趣好久，一直想封装一个组件发布，空闲下来了试了一下，感觉还是不难的，比较简单，就不贴代码了。
livePlayer播放直播流
weixin_44445363的博客
04-02 2042
livePlayer播放直播流 官网：https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%B1%9E%E6%80%A7-property 业务场景：用户输入rtmp或者rtsp流地址，调用后端接口将其转换为 .flv结尾的地址，将该地址赋值给liveplayer的videoUrl来进行播放 vue2安装 第一步： npm install @liveqing/liveplayer 第二步： 安装 copy-webpack-plugin 插件,
禁用鼠标右键菜单
落下香樟树
02-08 103
禁止右键菜单 || 禁止键盘事件 1、禁止鼠标右键菜单 // 屏蔽鼠标右键菜单 document.oncontextmenu = function () { return false; }; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <lin...
VUE中调用PC摄像头时报错问题：getUserMedia is not implemented in this browser解决办法
zzy7075的专栏
03-07 1187
VUE中调用PC摄像头时报错问题：getUserMedia is not implemented in this browser解决办法
vue2 组件vue-video-player播放视频，支持hls格式
Aesop的博客
10-06 7138
vue2 组件vue-video-player播放视频，支持hls格式。
vue3搭配LiveQing实现播放直播功能(hls,m3u8)
m0_62399152的博客
01-16 2583
vue3搭配LiveQing实现播放直播功能
vue项目中视频实时播放时 播放器遇到的问题和解决过程 flv.js - EasyPlayer - LivePlayer
sandwich_99的博客
01-11 3311
EasyPlayer多屏实时播放 | 时差 | 延迟处理的很完善，EasyPlayer对于fvl.js的延迟问题采用的是追帧和加速播放，随着你暂停时间越久他追帧速度越慢，并且在追到延迟在10s时就停止了，也就是直播画面总是有10s的延迟（直播设备是测试过没问题的，并且在销毁重创画面是实时的）后来又发现了livePlayer，测试使用发现以上问题都不存在了，延迟也最慢控制在3s，也是我们项目中能接受的范围
vue-video-player 在使用时视频加载不出来，报错The media could not be loaded, either because the server ...
热门推荐
张小薇爱学习
11-16 1万+
vue-video-player 显示X 报错 ，the media could not be loaded, either because the server or network failed or because the format is not supported
解决vue-video-player点击暂停/播放时，会触发多次的问题
大唐锦绣的博客
02-20 3272
前言：一般出现这样的问题是与扩展fastclick有关。fastclick主要是用于优化移动端点击延迟300ms的问题。而fastclick会与video.js冲突。vue-video-player是必须引入video.js作为基础条件的。这就导致了一次点击暂停/播放事件，会多次的触发暂停/播放。导致事件覆盖，所以会有点击无效的感觉。 解决方法其实很简单，但是大多数是直接修改node_modules内的fastclick源码，粗暴而且维护困难。 一、方法 fastclick本身需要在main.js.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值