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

最新推荐文章于 2024-08-09 09:33:00 发布
最新推荐文章于 2024-08-09 09:33:00 发布
阅读量904 收藏 2
点赞数
文章标签： vue.js 音视频 前端 h.265
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50238536/article/details/132027377
版权
在按照官方文档将easyPlayer集成到项目中时，遇到wasm文件解析404的问题。通过将wasm文件放在服务器根目录下解决了该问题，实现了直播视频的播放。对于需要高流畅度或展示多个直播的情况，推荐使用jessibuca库，但要注意它是收费的，且提供了软解码和硬解码选项。
摘要由CSDN通过智能技术生成

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

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

ztliu_admin
关注
vue3中使用EasyPlayer播放h265视频流
qq_44872773的博客
07-03 1278
2、找到node_modules中的EasyPlayer.wasm和EasyPlayer-element.min.js。4、在index.html中引入jquery.min.js和EasyPlayer-element.min.js。3、复制到public下面，并复制一个jQuery.js，否则会出去问题。1、下载EasyPlayer 5.0.3版本。5、在页面中直接使用。
vue中使用EasyPlayer播放监控视频HLS，H265、H264
m0_65209474的博客
11-01 2255
vue中使用EasyPlayer播放监控视频HLS，H265、H264
EasyPlayer.js在使用vue3中使用
最新发布
风花一世月
08-09 657
npm install @easydarwin/easyplayer --save 把 node_modules/@easydarwin/easyplayer/dist/element目录下的文件 复制到public内 index.html <script type="text/javascript" src="/js/EasyPlayer-element.min.js">&l...
EasyPlayer.js在vue项目中的使用
weixin_50515020的博客
03-25 8762
最近在整视频监控的东西，要用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 3439
vue2中使用EasyPlayer播放H265视频流
VUE2使用EasyPlayer.js实现H264，H265视频流播放
m0_60086371的博客
01-17 7394
VUE2使用EasyPlayer.js实现H264，H265视频流播放
使用EasyPlayer播放H.265视频流
weixin_43200585的博客
11-22 1181
EasyPlayer流媒体视频播放器可支持H.264与H.265编码格式，性能稳定、播放流畅，能支持RTSP、RTMP、HLS、FLV、WebRTC等格式的视频流播放，并且已实现网页端实时录像、在iOS上实现低延时直播等功能。
项目页面播放H265编码的视频或直播.zip
10-20
实测可用，分享一下，资源如下：1.在线播放视频链接地址；2.项目中前端浏览器页面播放h264、h265编码的flv直播或mp4视频；3.解决网页H265格式视频播放，提供插件github地址，实测可用。
Vue3/Vite引入EasyPlayer.js播放H265视频错误的问题
zxstrive的专栏
05-21 1984
Vue3/Vite引入EasyPlayer.js播放H265视频错误的问题及播放器刚开始接收不到流报错的解决方案
EasyPlayer.js 在VUE中使用
05-22
下面我们将详细介绍如何在Vue项目中使用EasyPlayer.js，以及涉及到的相关配置文件`webpack.dev.conf.js`和`webpack.base.conf.js`的作用。 首先，我们需要了解Vue项目的构建流程。Vue.js项目通常使用Webpack作为...
HEVC(H265)播放器
04-19
简易视频播放器，支持各种视频文件类型，主是是为了支持H265，HEVC编码的文件,同时也支持H264,mp4,avi,rmvb,flv 等格式的文件
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种
08-12
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种
vue2/3 - 最新详细实现免费在线播放 flv | hls 格式视频地址，vue在线同时播放flv和hls两种或更多视频流地址及分块展示，vue播放flv，vue播放hls（m3u8）同时播放多种
高级前端工程师
07-11 2448
vue2，vue3，nuxt.js，视频播放器，flv，hls，视频格式，vue同时播放flv和hls视频流，如何同时播放多种视频格式，西瓜视频，免费，vue flv和hls兼容的播放器，支持video视频插件播放flv格式的视频文件，vue如何播放hls格式的在线视频，视频地址，播放地址，url播放，一个视频地址在线播放，视频播放，推流，m3u8和flv视频播放，组件，最好用的视频播放器免费插件，详细教程，手机，pc电脑，输入播放地址就能点播，官方文档，一个页面播放多个不同格式的视频，网页Hls Flv直
vue2播放（大华）实时视频流-h264、h265
a895544608的博客
07-19 1851
点击链接->在线开放文档->快速入门->下载最新demo->里面的demo可以测试视频流是否能正常播放（不能的话就质问后端）三、视频播放器-wsplayers（因为公司是和大华有合作、通过大华官网看他们播放器很流畅.于是）不知是是不是我个人原因、h264可以正常播放、h265就歇了，果断换播放器。缺点：h264很流畅、h265稍卡、h265+ 硬解码两个视频cpu直接拉满。优点：h264、h265、h265+ 及各种小牌摄像头都能播放。优点：h264、h265、h265+ 及各种小牌摄像头都能播放。
EasyPlayer播放H.265的HLS视频流出现加载异常的问题分析及解决方法
TSINGSEE青犀视频官方技术博客
10-25 1276
发现播放器加载出现了两个video标签，猜测是初始化H.265时，播放器的video标签并没有成功销毁。
vue项目中使用EasyPlayer.js播放视频
weixin_56039168的博客
03-15 2532
项目中最近需要接摄像头的监控画面，一开始用了市面上一些别的插件，发现有些视频能播放，有些不能播放，最后发现是摄像头码流的问题，很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头，都是h265的编码格式。千万不要下载6.0之后的版本，容易产生很多你意想不到的问题。将这两个文件复制于public根目录下，不然会报错。二、复制文件于public的跟目录下。三、使用（直接上代码）
vue中播放h265视频流
weixin_44959182的博客
06-17 5412
最近vue推流视频项目需要视频流适配h265，找到很多解码js，发现稳定和好用的还是WXInlinePlayer。 官方文档地址https://github.com/ErosZy/WXInlinePlayer。 一如既往我还是的喜欢直接上代码。不过这里提示下因为WXInlinePlayer没有WXInlinePlayer包 <template> <div> <iframe style="width: 100% ;height: 100vh;" frameborde.
H.265网页无插件播放EasyPlayer.js流媒体播放器常见问题及解答
AI与流媒体视频技术
04-10 1214
因为H.265解码比较占用播放端的CPU性能，所以不建议播放多路H.265格式的视频流，可以切换为H.264。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值