EasyWasmPlayer项目打包后部署dist黑屏

最新推荐文章于 2025-11-15 18:04:51 发布
原创 最新推荐文章于 2025-11-15 18:04:51 发布 · 578 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #html #前端

在EasyWasmPlayer项目打包成dist并部署后，出现h265格式视频黑屏的问题，同时发现libDecoder.wasm文件404错误。通过开发者工具网络面板定位到libDecoder.wasm文件路径不正确，需要将其更新为与实际网页相匹配的地址，以解决播放器无法正常工作的问题。
部署运行你感兴趣的模型镜像

EasyWasmPlayer项目打包后

dist文件部署后h265格式视频黑屏有视频流

libDecoder文件404

在开发者工具中网络下找到编译器文件libDecoder.wasm文件

指针移到文件名上查看文件地址

如（此图为类似方法不是相应文件）

再去编译器中查看项目引用播放器js文件中libDecoder.wasm文件地址

此处改成与网页一致即可

您可能感兴趣的与本文相关的镜像

Seed-Coder-8B-Base

Seed-Coder-8B-Base

文本生成
Seed-Coder

Seed-Coder是一个功能强大、透明、参数高效的 8B 级开源代码模型系列，包括基础变体、指导变体和推理变体，由字节团队开源

Assontu
关注
vue-electron打包后报错：Fetch API cannot load app://./EasyPlayer.wasm. URL scheme “app“ is not supported
zxstrive的专栏
08-26 2345
说是无法获取 app://./EasyPlayer.wasm，不支持“app”协议，我想不对啊，那app://./index.html怎么能访问呢？这就是 electron 自定义的一个协议，用于访问vue页面的，我的理解是这样子的。运行打包后的 electron 应用，打开控制台，发现app://./服务目录下没看到 EasyPlayer.wasm文件，什么情况？惊奇的发现，H265的视频居然可以看了！如下图所示，用红框框的地方，原来打包的时候是没有的。Object (可选)重新打包，运行程序！.....
手把手教你如何Vue项目打包dist文件并Tomcat发布【超级详细】
热门推荐
**My Coding Family**
03-24 1万+
零基础带你入门Vue项目打包部署到Linux服务器，一条龙服务，只为不远千里把你教会。
wasm 视频解码渲染实现
lidec的专栏
12-05 5934
实现一个wasm视频解码渲染的小demo，网页端集成emcc编译的ffmpeg库，实现视频解码，使用WebGL实现视频渲染。demo中包含了一个基于mongoose的微型Web服务器，用于网页的Web服务和视频流传输，基本无需额外搭建环境以及编译第三方库，可以简单地移植到嵌入式系统中用于网页视频播放视频。
EasyPlayer.js:EasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）直播与点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、asm、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。EasyPlayer.js H5 Player support HTTPRTMPHTTP-FLVHLS(m3u8) live streaming & vod strea
05-10
EasyPlayer.js 简介 EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。 功能说明 支持 m3u8/HLS 播放; 支持 HTTP-FLV/WS-FLV 播放; 支持 H265 播放; 支持直播和点播播放; 支持全屏显示; 支持重连播放； 集成使用示例 普通集成 1.引入 copy EasyWasmPlayer.js 到项目中 copy libDecoder.wasm到项目或者www的根目录（一定要根目录） 2.在 html 中引用 EasyWasmPlayer.js <!DOCTYPE html> <html l
WasmVideoPlayer 安装与配置指南
最新发布
gitblog_00870的博客
11-15 497
WasmVideoPlayer 是一个基于 WebAssembly (WASM)、FFmpeg、WebGL 和 Web Audio API 的视频播放器项目。该项目主要解决了在浏览器中播放 H265 编码视频的问题，利用 WebAssembly 提供的性能优势，实现了视频的解码、渲染和播放。主要使用的编程语言包括 JavaScript、C 以及 HTML/CSS。 ## 2. 项目使用的关键技术
WasmVideoPlayer:使用wasm和webgl和网络音频api播放文件流，使用ffmpeg来支持多编解码器，尤其是h265，支持http，websocket，http-flv流
05-10
@[TOC](基于WASM的H265 Web播放器) 1 背景 目前这个时间点，原生支持H265(HEVC)播放的浏览器极少，可以说基本没有，主要原因一个是H265的解码有更高的性能要求，从而换取更高的压缩率，目前大多数机器CPU软解H265的超清视频还是有点吃力，硬解兼容性又不好，另外一个原因主要是H265的专利费问题。因此H265有被各大浏览器厂商放弃的趋势，转而去支持更加开放的AV1编码，但是AV1编码的商用和普及估计还有段时间。 H265与H264相比主要的好处在于相同分辨率下降低了几乎一倍的码率，对带宽压力比较大的网站来说，使用H265可以极大削减带宽消耗(尽管可能面临专利费麻烦)，但是由于浏览器的支持问题，目前H265的播放主要在APP端实现，借助硬件解码，可以获得比较好的性能和体验。 本文相关的代码使用WASM、FFmpeg、WebGL、Web Audio等组件实现了一个简易
vue项目的EasyWasmPlayer打包后部署libDecoder.wasm找不到，视频流可以推送，视频黑屏不显示。
qq_37928062的博客
08-18 1428
找了好久才知道要把EasyWasmPlayer.js，libDecoder.wasm文件配置在服务器ngnix的地址指向的file目录下，EasyWasmPlayer.js也可以放在public下。用项目的地址访问这个资源能访问到，比如你项目访问到你放的这个资源的地址 www.xxx.com:9000/file/libDecoder.wasm。加上项目地址能访问到的后缀。www.xxx.com:9000/file/libDecoder.wasm是能访问到，就把端口后面的换成那个。
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
10-14
Vue.js项目在开发过程中，通常会使用`npm run build`命令进行打包，打包后会在项目根目录下生成一个名为`dist`的文件夹，其中包含了编译后的静态资源，适合部署到生产环境。然而，有时候将项目推送到Git仓库时，可能...
精选资源
项目打包运行dist以及nginx配置
04-11
在IT行业中，项目打包运行和Nginx配置是两个关键环节，它们对于应用程序的部署和发布至关重要。这里我们将深入探讨这两个主题。 首先，项目打包运行通常指的是将开发完成的前端或后端应用转换为可部署的形式。对于...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
10-16
将Vue项目打包后的`dist`文件部署到Express服务器上是一种常见的部署方式。 #### Express服务器部署步骤 1. 安装Express生成器：使用命令`npm install express-generator -g`来全局安装Express应用生成器，它提供...
在linux服务器上安装xshell、xftp、nginx，部署前端打包的dist项目_xftp部署dist(1)
2401_84139676的博客
05-12 664
为了做好运维面试路上的助攻手，特整理了上百道，让你面试不慌心不跳，高薪offer怀里抱！这次整理的面试题，本份面试集锦涵盖了1、什么是运维?2、在工作中，运维人员经常需要跟运营人员打交道，请问运营人员是做什么工作的?3、现在给你三百台服务器，你怎么对他们进行管理?4、简述raid0 raid1raid5二种工作模式的工作原理及特点5、LVS、Nginx、HAproxy有什么区别?工作中你怎么选择?6、Squid、Varinsh和Nginx有什么区别，工作中你怎么选择?
EasyNVR调用指定时间端录像播放接口出现黑屏的问题原因以及解决方法
EasyNVR官方技术博客
08-18 329
为了方便用户的调用和集成，EasyNVR、EasyDSS、EasyGBS等平台在研发时就预留了丰富的二次开发接口，因此很多用户都会在原本的平台基础上进行集成，达到项目的需求。当然这些平台还可以和第三方平台进行对接、嵌入等，从功能上看，是一款稳定、可持续使用的平台。客户在使用EasyNVR录像的时候在调用指定时间端录像播放接口时，有时候会出现黑屏的现象： 产生这个问题的原因时因为我们默认调用这个接口是在浏览器上面播放，但是浏览器是不支持播放H265的流的，所以如果EasyNVR接入设备输出的是H265的
RTSP协议视频智能分析平台EasyNVR新增H265播放器EasyPlayer和EasyWasmPlayer的区别介绍
EasyNVR官方技术博客
12-15 971
对于很多要求网页直播的用户来说，目前市面上大多数可集成的平台都是要安装插件的，但是插件在某些项目中表现的并不友好，给用户的使用带来不便。因此TSINGSEE青犀视频研发的无插件视频直播平台就在这样的项目场中发挥了重大作用。 而随着H.265编码格式技术的进步，之前的使用模式已经不满足于用户的播放及存储需求，H.265编码因此进入了火热阶段。对于TSINGSEE青犀视频来说，模式的转变和升级是我们必经的过程。因此我们基于我们现有的视频智能分析平台，研发了新的播放器来对H.265编码格式进行兼容。
vue中使用EasyPlayer打包部署时报错expected magic word 00 61 73 6d，found 3c 21 44 4f @+0）at Error解决方案
m0_65209474的博客
11-02 1279
报错expected magic word 00 61 73 6d，found 3c 21 44 4f @+0）at Error解决方案
H.265编码视频播放器在播放FLV视频流时出现黑屏，如何解决？
TSINGSEE青犀视频官方技术博客
10-10 2253
EasyPlayer是一款流媒体播放器系列项目，支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放、支持本地文件播放，支持本地抓拍、本地录像、播放旋转、多屏播放、倍数播放等多种功能特性，目前支持Windows、Android、iOS三个平台，EasyPlayer.js还支持Linux平台。 提出问题 TSINGSEE青犀视频研发团队近期在研发H265播放器开发，发现使用H265播放器播放FLV视频流，会出现黑屏现象，等待后也无法正常播放。 分析问题 通过浏
EasyWasmPlayer播放视频报错Uncaught (in promise）DOMException
TSINGSEE青犀视频官方技术博客
11-10 1634
作为TSINGSEE青犀视频开发的视频流媒体播放器，EasyPlayer 系列项目都支持集成以及二次开发，也可以通过下载试用获得真实的测试效果。其中新的 H.265 播放器分支 EasyWasmPlayer 播放器是网页播放的主流播放器。 当我们在项目中采用 EasyWasmPlayer 播放视频时，控制台会一直出现报错 Uncaught (in promise）DOMException。本文我们分析下该报错是什么问题导致的。 其实这个问题是浏览器阻止自动播放导致的错误，用户设置了自动播放，所以在首
H264/H265编码视频流媒体播放器EasyWasmPlayer.js控制台循环报错Unsupported排查
TSINGSEE青犀视频官方技术博客
04-14 970
作为支持H265编码的视频播放器EasyWasmPlayer.js，我们开发后立即在EasyNVR内做了测试，EasyWasmPlayer.js表现出了良好的适配性和优越的稳定性，目前在TSINGSEE青犀视频开发的其他视频平台中也已经集成。 EasyWasmPlayer.js播放器也是支持用户来测试的，当然在自行开发的时候也可能会产生报错。比如有时会在控制台出现如下图的报错，并且报错一直循环重复，导致chrome崩掉： 根据报错log，是flv.js播放了不支持的音频编码（只支持AAC和MP3
vue3使用EasyWasmPlayer.js播放器
m0_37715184的博客
06-10 4238
vue前端播放器
RTSP协议视频平台EasyNVR内H265编码EasyWasmPlayer播放器如何优化起播时的快照功能？
EasyNVR官方技术博客
12-23 700
之前的博文中我们讲过，为了适应现阶段H265编码的发展，TSINGSEE青犀视频在EasyNVR中首次加入了自主选择播放器的功能，可以选择使用EasyPlayer播放器播放H264编码视频，也可以选择使用EasyWasmPlayer播放器播放H265编码视频。 EasyWasmPlayer播放器运用于EasyNVR中时，在播放视频前因为等待视频流数据和解码需要一定的时间，这就导致视频起播后，播放器会有一段时间处于黑屏状态，经过我们讨论后，这个短暂的黑屏状态可以利用起来，用来显示视频快照，下面分享一下我
vue项目打包生成的dist后如何修改
06-21
Vue 项目打包后会生成一个 `dist` 文件夹，该文件夹中包含了经过优化和压缩的静态资源文件（如 HTML、CSS、JavaScript 和图片等），这些文件通常用于部署到生产环境。对 `dist` 文件进行修改需要特别注意以下几点： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值