vue3使用EasyWasmPlayer.js播放器

已于 2022-06-10 18:13:50 修改
阅读量4k 收藏 6
点赞数 2
文章标签： 前端 vue.js javascript
于 2022-06-10 18:06:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_37715184/article/details/125225667
版权
在Vue3项目中，开发者遇到使用EasyPlayer.js时的导入错误，转而尝试使用EasyWasmPlayer.js。尽管播放器能正常播放h264和h265码流，但在打包后通过nginx服务部署时，浏览器无法正确加载libDecoder.wasm文件。问题在于libDecoder.wasm的路径解析不正确。解决方案是确保所有资源文件放置在根目录，并在nginx配置文件中设置正确的根路径。经过配置修改并重启nginx服务后，问题得到解决。

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

vue3使用EasyWasmPlayer.js遇到的坑

刚开始使用的是EasyPlayer.js，我的是ts文件导入组件EasyPlayer-component.min.js一直报错，说是导入组件时出问题了，后来在网上找到EasyWasmPlayer.js前端播放器，但还是遇到问题，不管码流是h264还是h265都能正常播放，但是打包用nginx服务部署时可能会遇到以下情况：

在这里插入图片描述
在这里插入图片描述
可以看到浏览器加载EasyWasmPlayer.js文件访问路径是：“/sms/EasyWasmPlayer.js”,但是加载libDecoder.wasm文件时却找不到，两个文件确实都已经放在根目录上了！

解决问题操作：

项目目录如下：

在这里插入图片描述
index.html内容：

在这里插入图片描述
vue项目打包配置：

在这里插入图片描述

配置nginx.conf文件时别整“/sms/”路径，直接来真实的根目录"/"：

在这里插入图片描述

修改完配置文件后重启nginx服务：

在这里插入图片描述

接触vue前端开发才几个月，以及首次接触前端实时监控视频。以上是自己遇到的问题！！！完

m0_37715184
关注
vue3中使用EasyPlayer播放h265视频流
qq_44872773的博客
07-03 2241
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、在页面中直接使用。
在Vue3中如何使用H.265视频流媒体播放器EasyPlayer.js？
EasyCVR视频融合云平台的技术博客
04-15 1588
如果需要使用到快照功能，需要先获取播放器easyplayer的vue实例，然后通过实例去调用snapshot方法。
EasyPlayer.js 在VUE中使用
05-22
EasyPlayer.js 在VUE中使用 https://blog.csdn.net/u012848709/article/details/106291133
vue3 + vite使用EasyWasmPlayer.js多路播放监控直播流
qq_53943928的博客
05-28 2101
easywasmplayer文档地址：https://www.npmjs.com/package/easywasmplayer
WasmVideoPlayer 安装与配置指南
最新发布
gitblog_00870的博客
03-31 364
WasmVideoPlayer 安装与配置指南 WasmVideoPlayer Play file/stream with wasm & webgl & web audio api, using ffmpeg for multi codec support, especially for h265，support htt...
EasyPlayer.js在使用vue3中使用
风花一世月
08-09 1345
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...
vue及H5中使用easywasmplayer H265播放器
热门推荐
Nie2014的博客
03-11 1万+
EasyWasmPlayer播放器，就是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）、WS-FLV视频直播与视频点播等多种协议，重点在于该播放器是一款支持H5的播放器，可以兼容H.265编码格式视频在web浏览器上面的直播。 参考资料： 该播放器可以实现在html中集成以及vue中集成。 具体的文档在easywasmplayer安装包的readme文档中有介绍。 详细的html、vue示例代码：github示例项目代码 官方的文档地址： 开源中国：https://my.osch
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种
08-12
EasyPlayer.js是一款强大的H5播放器，专为现代网页设计，提供对多种视频流协议的支持。这款播放器的核心特点在于其跨平台兼容性和灵活性，能够适应HTTP、HTTP-FLV以及HLS（m3u8）等不同类型的视频传输方式，从而实现...
前端使用EasyPlayer.js 在浏览器播放编码格式为h265的视频
weixin_39891473的博客
12-14 3242
前端使用EasyPlayer.js 在浏览器播放编码格式为h265的视频
EasyWasmPlayer vue使用
05-16
3. 在 Vue 组件中使用 EasyWasmPlayer ```vue <easy-wasm-player :src="url" :autoplay="true" :loop="true"></easy-wasm-player> import EasyWasmPlayer from &#39;easywasmplayer&#39;; import &#39;easywasmplayer/...
Vue3/Vite引入EasyPlayer.js播放H265视频错误的问题
zxstrive的专栏
05-21 2774
Vue3/Vite引入EasyPlayer.js播放H265视频错误的问题及播放器刚开始接收不到流报错的解决方案
vue项目中使用EasyPlayer.js播放视频
weixin_56039168的博客
03-15 2736
项目中最近需要接摄像头的监控画面，一开始用了市面上一些别的插件，发现有些视频能播放，有些不能播放，最后发现是摄像头码流的问题，很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头，都是h265的编码格式。千万不要下载6.0之后的版本，容易产生很多你意想不到的问题。将这两个文件复制于public根目录下，不然会报错。二、复制文件于public的跟目录下。三、使用（直接上代码）
在Vue3中如何使用EasyPlayer.js播放器？
EasyNTS的博客
12-09 1067
H5播放器不仅支持直播和点播播放，还具备录像、快照截图、MP4播放、多屏播放、倍数播放、全屏播放等功能特性。EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器，可支持多种流媒体协议播放，无须安装任何插件，起播快、延迟低、兼容性强，使用非常便捷，并且已实现网页端实时录像、在iOS上实现低延时直播等功能。例如，EasyPlayer.js播放器能够支持H.264、H.265等多种音视频编码格式，这使得播放器能够适应不同的视频内容和网络环境。1）首先通过npm引入easyplayer.js；
vue3+easyplayer封装组件
study_azhuo的博客
01-16 494
vue3+easyplayer
vue项目使用easyplayer播放m3u8直播推流
weixin_46607967的博客
11-23 3852
项目背景如图后端给了m3u8的直播地址 协议是 hls / flv市面上很多第三方热门播放库都可以完成该多屏播放方式 如Video.js问题在于 分多屏时 会存在性能问题 并且关闭播放器后 即便删除Dom或调用停止等方法 F12网络还在不断的请求分片故采用该库该库使用方便 性能较好 文档清晰 几乎0上手成本。
vue3直播视频流easy-player
梦寻汝的博客
08-01 609
vue3直播视频流easy-player。
Vue-cli3集成视频流媒体播放器EasyPlayer.JS报EasyPlayer.swf Not Found错误如何解决？
TSINGSEE青犀视频官方技术博客
06-23 1446
在Vue-cli3项目引入网页视频流媒体播放器EasyPlayer.JS一文中，我们解决了videojs报错的问题，除了videojs报错之外，还有一个问题，我们本文就来说一下。 Vue-cli3多页面项目集成EasyPlayer.JS报EasyPlayer.swf Not Found错误 提出问题 Vue-cli3多页面项目集成EasyPlayer.JS打包后，可以看到页面一播放RTMP正常： 但是在页面二播放RTMP包的时候，提示EasyPlayer.swf文件找不到。 分析问题 E
H265编码网页视频流媒体播放器EasyWasmPlayer.js播放控制台提示Uncaught TypeError排查
TSINGSEE青犀视频官方技术博客
04-21 851
基于EasyPlayer的研究基础，TSINGSEE青犀视频进一步顺应互联网视频行业发展的需求，研发了H.265网页播放器EasyWasmPlayer.js，在4.2.0版本之后的EasyNVR视频平台已经可以支持自主选择播放器了。 部分用户会选择自主使用EasyWasmPlayer.js播放器进行集成，出现了无法播放并且控制台报错的问题，报错信息: Uncaught TypeError: c is not a function。 分析问题 1.在线上播放发现没有问题，视频流可以正常播放
EasyPlayer.js播放器用vue3.0集成出现报错是什么原因？
TSINGSEE青犀视频官方技术博客
05-19 1804
出现上述报错的现象是因为，vue3.0不是通过npm导入，而是通过html的方式集成。
EasyWasmPlayer.js 如何引入到html
05-25
你可以使用以下代码将 EasyWasmPlayer.js 引入到 HTML 页面中： ``` <!DOCTYPE html> <html> <head> <title>My Page</title> </head> <body> <script src="path/to/EasyWasmPlayer.js"></script> </body> </html> ``` 请将 `path/to/EasyWasmPlayer.js` 替换为你的 EasyWasmPlayer.js 文件所在的路径。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值