使用easyPlayer再vue项目中播放H265 hls协议的直播视频踩坑记录

最新推荐文章于 2024-04-15 17:11:32 发布
最新推荐文章于 2024-04-15 17:11:32 发布
阅读量668 收藏 2
点赞数
文章标签： vue.js 音视频 前端 h.265
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50238536/article/details/132027377
版权

根据官方文档指示，将easyPlayer集成到项目中需要以下操作
主要就是一个xml脚本文件和一个js文件一个wasm文件
如图将js文件引入在public目录下index文件中

这么一看跟文档指示的一模一样，按道理就可以播放直播视频了。（还有一个点要注意一下，如果url使用的是服务器地址有跨域的，地址要改成localhost：后面跟服务器的端口号再拼接视频地址）
随后将项目打包到本地nginx服务器上，却一直报wasm文件解析404的错误，这个问题困扰了博主三天左右，后面再刷帖子无意中看到类似问题的解决方法，将wasm文件放在服务器根目录下（项目的同级目录），于是尝试了一波，果然可以播放了。如下图所示
在这里插入图片描述
ps：由于需求较为简单，只是展示直播视频，如果对流畅度有需求的或者展示多个直播，建议参考jessibuca库，（缺点就是收费）。收费的和开源的区别就是一个是软解码一个是软解码+硬解码~~~

ztliu_admin
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
项目页面播放H265编码的视频或直播.zip
10-20
实测可用，分享一下，资源如下：1.在线播放视频链接地址；2.项目中前端浏览器页面播放h264、h265编码的flv直播或mp4视频；3.解决网页H265格式视频播放，提供插件github地址，实测可用。
vue项目使用easyplayer播放m3u8直播推流
weixin_46607967的博客
11-23 2244
项目背景如图后端给了m3u8的直播地址 协议是 hls / flv市面上很多第三方热门播放库都可以完成该多屏播放方式 如Video.js问题在于 分多屏时 会存在性能问题 并且关闭播放器后 即便删除Dom或调用停止等方法 F12网络还在不断的请求分片故采用该库该库使用方便 性能较好 文档清晰 几乎0上手成本。
如何在Vue3中使用H.265视频EasyPlayer.js流媒体播放器？
最新发布
AI与流媒体视频技术
04-15 884
首先通过npm引入easyplayer.js。
EasyPlayer流媒体播放器播放HLS视频，起播速度慢的技术优化
TSINGSEE青犀视频官方技术博客
06-24 1528
在场景应用中，在按需直播模式中，流媒体服务器不会一直拉流，当用户点击请求播放时，才会生成m3u8文件。
EasyPlayer播放H.265的HLS视频流出现加载异常的问题分析及解决方法
TSINGSEE青犀视频官方技术博客
10-25 1192
发现播放器加载出现了两个video标签，猜测是初始化H.265时，播放器的video标签并没有成功销毁。
EasyPlayer播放H.265的HLS视频流，ts加载频繁导致浏览器卡顿是什么原因？
TSINGSEE青犀视频官方技术博客
05-13 1449
经过仔细排查代码发现，原来是在发送请求ts之前，代码中多了一个加载请求，因此导致循环请求，所以浏览器出现了卡顿。
vue项目中播放rtmp视频文件流的方法
10-14
主要介绍了vue项目中播放rtmp视频文件流 ,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
EasyPlayer.js 在VUE中使用
05-22
EasyPlayer.js 在VUE中使用 https://blog.csdn.net/u012848709/article/details/106291133
在vue项目中优雅的使用SVG的方法实例详解
10-17
本文旨在介绍如何在项目中配置和方便的使用svg图标。本文以vue项目为例给大家介绍在vue项目中优雅的使用SVG的方法，需要的朋友参考下吧
详解如何在vue项目中使用layui框架及采坑
10-17
主要介绍了vue使用layui框架，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种
08-12
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种
easyplayer2013
11-21
宇通灯饰控制系统软件2013版本，可以控制多种IC芯片。
Vue3下的视频直播流方法（RTSP和HLS流）
热门推荐
python_small_pan的博客
05-24 1万+
vue3下RTSP，HLS网页播放解决方案
【vue】Easy Player实现视频播放：
SunPeng的博客
01-01 2709
【vue】Easy Player实现视频播放：
【vue】vue+easyPlayer 实现宫格布局及视频播放
wan小小冰的博客
09-21 2721
vue+easyPlayer 实现四分屏、九分屏、十六分屏视频播放
vue中使用EasyPlayer播放监控视频HLS，H265、H264
m0_65209474的博客
11-01 1802
vue中使用EasyPlayer播放监控视频HLS，H265、H264
EasyPlayer.js在vue项目中的使用
weixin_50515020的博客
03-25 8304
最近在整视频监控的东西，要用H.265的编码，因为是第一次所以记录一下 使用的是EasyPlayer.js，它功能很强大，集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器 怎么在vue项目中使用呢？ 首先第一步 npm install @easydarwin/easyplayer --save 按常规到这步然后全局引用就可以了，但是EasyPlayer.js还需要配置一些文件才能使用 需要再下个依赖，不要大于6.0版本的，不然会有bug npm
Vue中使用EasyPlayer播放H265视频流
小怪獸丶的糖的专栏
05-08 3003
vue2中使用EasyPlayer播放H265视频流
vue中使用EasyPlayer.js教程
云帆的博客
05-27 1万+
0 前言 github: EasyPlayer.js 一定要是legacy分支哦，master分支是EasyWasmPlayer.js，有些功能不支持的 1 教程 首先npm安装EasyPlayer、copy-webpack-plugin ps：copy-webpack-plugin版本不能大于6.0，否则会出很多很多问题 npm install @easydarwin/easyplayer --save npm install [email protected] --save
前端如何在vue项目中播放rtsp视频流，并给出相关详细示例代码
05-27
在 Vue 项目中播放 RTSP 视频流需要用到插件或者库，常用的有 `vue-video-player` 和 `videojs-contrib-hls`。 下面是一个基于 `vue-video-player` 的示例代码： 1. 安装依赖 ``` npm install --save vue-video-player npm install --save video.js npm install --save hls.js npm install --save flv.js ``` 2. 在 `main.js` 中引入依赖 ```javascript import Vue from 'vue'; import VideoPlayer from 'vue-video-player'; import 'video.js/dist/video-js.css'; import 'vue-video-player/src/custom-theme.css'; Vue.use(VideoPlayer); ``` 3. 在组件中使用 `<video-player>` 标签 ```html <template> <div> <video-player ref="player" :options="playerOptions"></video-player> </div> </template> ``` 4. 在 `data` 中定义 `playerOptions` 对象 ```javascript data() { return { playerOptions: { autoplay: true, muted: true, sources: [{ type: 'video/mp4', src: 'rtsp://your-rtsp-url-here' }], html5: { hls: { enableLowInitialPlaylist: true, smoothQualityChange: true, overrideNative: true }, nativeVideoTracks: false, nativeAudioTracks: false, nativeTextTracks: false }, flash: { hls: { enableLowInitialPlaylist: true, smoothQualityChange: true } } } } } ``` 5. 运行项目，即可在页面中播放 RTSP 视频流。 需要注意的是，`vue-video-player` 本身并不支持 RTSP 视频流，需要配合 `hls.js` 或 `flv.js` 进行转换，上述代码中使用的是 `hls.js`。 另外，由于 RTSP 视频流的协议限制，需要在服务器端进行 CORS 设置，否则会出现跨域问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值