EasyWasmPlayer项目打包后部署dist黑屏

最新推荐文章于 2024-05-28 17:54:23 发布
最新推荐文章于 2024-05-28 17:54:23 发布
阅读量431 收藏
点赞数
文章标签： vue.js html 前端 Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Assontu/article/details/129493224
版权
在EasyWasmPlayer项目打包成dist并部署后，出现h265格式视频黑屏的问题，同时发现libDecoder.wasm文件404错误。通过开发者工具网络面板定位到libDecoder.wasm文件路径不正确，需要将其更新为与实际网页相匹配的地址，以解决播放器无法正常工作的问题。
摘要由CSDN通过智能技术生成

EasyWasmPlayer项目打包后

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

libDecoder文件404

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

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

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

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

最低0.47元/天 解锁文章
Assontu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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: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
视屏监控中EasyWasmPlayer.js的使用(react)
热门推荐
02-25 1万+
视频播放器
vue3 + vite使用EasyWasmPlayer.js多路播放监控直播流
最新发布
qq_53943928的博客
05-28 1303
easywasmplayer文档地址：https://www.npmjs.com/package/easywasmplayer
记录EasyWasmPlayer组件封装使用
qq_37928062的博客
08-18 635
1，新建一个EasyWasmPlayer.vue。2，父级页面使用,在自己使用的地方引用即可。
easywasmplayer组件封装 - 渲染监控视频
not exists的博客
07-27 1832
使用的物联网视频监控分为h264、h265解码格式使用的easywasmplayer播放器下面有npm的链接。监控为flv格式、有h264、h265格式,需要打开监控后必须关闭在组件里面生命周期结束之前调用了关闭接口。videoPlay方法是加载视频的data参数是通过this.$ref调用的这个方法。videodata参数关闭监控时候需要传入进来的。.........
项目打包运行dist以及nginx配置
04-11
在IT行业中，项目打包运行和Nginx配置是两个关键环节，它们对于应用程序的部署和发布至关重要。这里我们将深入探讨这两个主题。 首先，项目打包运行通常指的是将开发完成的前端或后端应用转换为可部署的形式。对于...
Vue项目打包部署到iis服务器的配置方法
10-16
Vue项目开发完成后，需要通过打包工具如Webpack将其打包成静态资源，以便部署到服务器上。IIS (Internet Information Services) 是Windows系统上的一种Web服务器。在将Vue项目部署到IIS服务器上时，会遇到一些配置...
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
10-16
将Vue项目打包后的`dist`文件部署到Express服务器上是一种常见的部署方式。 #### Express服务器部署步骤 1. 安装Express生成器：使用命令`npm install express-generator -g`来全局安装Express应用生成器，它提供...
vue项目打包部署到服务器的方法示例
10-18
Vue项目通常会经历开发、构建、部署这几个步骤，而项目打包部署到服务器则是将开发好的Vue项目移至生产环境的重要环节。本文详细介绍了将Vue项目打包并部署到服务器上的具体方法和步骤，同时也会涉及到一些在部署...
react-h265-wasm-player:演示版
05-19
ReactH265 WASM播放器 更高级别的React组件可播放h265视频 关于 用法 NPM和Webpack / Browserify 通过npm安装。 使用--save将其包含在package.json中。 npm install react-h265-wasm-player 首先在您的React代码中导入/请求react-h265-wasm-player。 import ReactH265Player from 'react-h265-wasm-player' ; import React , { useState } from 'react' ; import ReactH265Player from './ReactH265Player' function App ( ) { const [ playerRef , setPlayerRef ] = useSt
Vue项目webpack打包部署到服务器的实例详解
08-29
文章中提到，尽管在打包部署过程中遇到了一些问题和挑战，但通过不放弃和积极尝试，最终还是成功地将Vue项目部署到了服务器。这个过程中，对`config/index.js`文件中的`assetsPublicPath`的正确配置是关键。此外，...
使用easywasmplayer实现视频流播放
huaweichenai的博客
09-21 945
EasyPlayer.js H5播放器，是一款能够同时支持HTTP、RTMP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。
wasm 视频解码渲染实现
lidec的专栏
12-05 4630
实现一个wasm视频解码渲染的小demo，网页端集成emcc编译的ffmpeg库，实现视频解码，使用WebGL实现视频渲染。demo中包含了一个基于mongoose的微型Web服务器，用于网页的Web服务和视频流传输，基本无需额外搭建环境以及编译第三方库，可以简单地移植到嵌入式系统中用于网页视频播放视频。
easydarwin 下面easywasmplayer和easyplayer
成长的笨熊
01-18 786
目前好像是兼容h264和H265可以播放除rtsp的常用格式
vue项目的EasyWasmPlayer打包后部署libDecoder.wasm找不到，视频流可以推送，视频黑屏不显示。
qq_37928062的博客
08-18 960
找了好久才知道要把EasyWasmPlayer.js，libDecoder.wasm文件配置在服务器ngnix的地址指向的file目录下，EasyWasmPlayer.js也可以放在public下。用项目的地址访问这个资源能访问到，比如你项目访问到你放的这个资源的地址 www.xxx.com:9000/file/libDecoder.wasm。加上项目地址能访问到的后缀。www.xxx.com:9000/file/libDecoder.wasm是能访问到，就把端口后面的换成那个。
EasyWasmPlayer.js播放hls流媒体关闭后，后台请求未停止
yifei2225240456的博客
03-01 517
最近在做项目的时候，有在前端播放hls协议 h265监控视频的需求，就用到EasyWasmPlayer.js。发现一个问题：当页面关闭时 发现浏览器网络请求依然在执行（很多分片的ts文件）在页面即将销毁时beforeUnmount生命周期处理。
项目webpack打包后的 dist 文件
09-05
项目经过webpack打包后会生成一个dist文件夹，其中包含了经过处理和压缩后的最终产物。dist文件夹下的内容是部署到服务器或发布到线上环境的静态资源文件。 dist文件夹的结构取决于webpack的配置以及项目的需求。通常它会包含一个或多个JS文件，包括应用的逻辑代码和依赖的第三方库，以及一个或多个CSS文件，包含项目的样式代码。此外，还会包含一些字体文件、图片或其他静态资源，这些文件在构建过程中被处理并复制到dist文件夹中。 在项目开发过程中，dist文件夹不会被直接修改，而是由webpack根据配置和源代码生成。webpack处理过程中会进行代码的压缩、合并、混淆等操作，以减小文件大小并提高加载速度。此外，webpack还会处理一些前端框架或工具的特定需求，例如处理jsx代码、提取公共模块等。 通过打包后的dist文件，我们可以快速查看打包后的效果，验证代码是否正确地被处理和运行。同时，dist文件也是发布项目到线上环境的基础，我们可以将dist文件夹中的内容直接上传到服务器进行部署，并通过浏览器访问项目的最终版本。 总的来说，dist文件夹是经过webpack处理后的项目产物，包含了所有打包后的静态资源文件。它具有优化过的代码和资源，适合部署和发布到线上环境使用，能够提供更好的性能和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值