electorn读取本地视频资源

最新推荐文章于 2024-06-14 09:49:31 发布

原创最新推荐文章于 2024-06-14 09:49:31 发布 · 923 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#electron #前端 #vue.js

前端同时被 3 个专栏收录

69 篇文章

订阅专栏

Vue

56 篇文章

订阅专栏

前端速成

25 篇文章

订阅专栏

这篇博客分享了一个在JavaScript中将文件读取为Blob对象的实用技巧。通过使用`fs.readFileSync`读取文件，然后转换为`Uint8Array`，接着创建Blob对象，并利用`window.URL.createObjectURL`生成URL，实现文件对象在前端的处理。

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

踩了一些坑最终还是找到了以下方法

function getMp4File(item){
	const buf = fs.readFileSync(item)
	const uint8Buffer = Uint8Array.from(buf)
	const bolb = new Blob([uint8Buffer])
	return window.URL.createObjectURL(bolb);
}

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小张很嚣张～

关注关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Electron+vue从零开始打造一个本地音乐播放器

ouwen110的博客

12-11

1068

为什么要做？女朋友工作是音频后期，平常会收集一些音频音乐，需要看音频的频谱波形，每次用au这种大型软件播放音乐看波形，很不方便，看到她这么辛苦，身为程序猿的我痛心疾首，于是，就有了这么一个小软件，软件涉及到的技术主要为electron,vue,node,波形的展示主要通过wavesurfer生成。从零开始-搭建项目项目通过vue脚手架搭建的，所以需要安装cli工具,如果已经装了，可以跳过这一步. npm install -g @vue/cli # OR yarn global add @..

electron播放本地任意格式的视频

daodfs1的博客

09-02

6689

目录说明npm依赖核心代码创建一个独立的video-server.js文件，在子里程中运行，开启http服务创建一个独立的server-child.js文件，开启子里程运行video-server.js使用（非核心代码）html文件index.js文件说明不支持快进和显示时间，最大流畅支持2G/小时的视频，未使用硬件加速（技术水平不足），高清视频转码太慢。 electron可以直接读取硬盘上的文件，对于mp4视频不需要转码（很不严谨，如需要更严谨，请参考别人的博客），直接将其路径赋值给video的src

参与评论您还未登录，请先登录后发表或查看评论

electron选择加载本地资源【图片、视频、音频】

weixin_42429220的博客

05-25

1865

electron要成功预览本地文件主要还是利用对文件做处理，拿到二进制数据，通过主进程与渲染进程通信，把文件的二进制传输给渲染进程，经过Blob转换得到URL, 就ok了。

electron和vue读取本地视频文件并转化为blob

阿勇的博客

03-03

5385

electron和vue读取本地视频文件并转化为blob fs获取本地视频并转化为blob格式 <template> <div class="test"> <video controls="true" autoplay="" name="media"> <source :src="videoSrc" type="video/mp4"> </video> </div> &l

electron-rtsp-to-rtmp:在electron中实现本地播放rtsp视频流

05-25

electron-rtsp-to-rtmp 在electron中实现本地播放rtsp视频流 git clone ...... npm install npm start 复制 rtmp://localhost:1938/live/livestream 到播放器打开即可查看，具体代码看man.js文件

播放本地视频

06-04

在Android开发中，"播放本地视频"是一个常见的需求，它涉及到多媒体处理和UI设计的知识点。下面我们将详细探讨如何在Android应用中实现这个功能。首先，我们要了解Android系统中的视频播放是通过`MediaPlayer`类来...

Electron项目：读写本地json文件，实现用户登录、修改用户信息，窗口最小化，最大化，关闭窗口

09-02

Node.js的`fs`模块提供了读写文件的能力，例如`fs.readFile()`和`fs.writeFile()`，可以用来读取和保存JSON数据到本地文件。 3. **用户登录**：用户尝试登录时，通常会提供用户名和密码。在正常情况下，这些信息...

electorn

最新发布

04-02

此外，Electron 利用了 Node.js 提供的强大功能集，使得开发者可以通过 JavaScript 访问底层操作系统的资源和服务[^4]。 #### 主要特点与优势以下是 Electron 框架的一些关键特性及其带来的好处： - **跨平台兼容...

electorn-learn

03-18

电子快速启动克隆并运行以快速查看Electron的运行情况。这是基于Electron文档中的《的最小的Electron应用程序。将此应用程序与应用程序结合使用以获取API代码示例，以帮助您入门。基本的Electron应用程序仅需要...

lp-calculator-electorn

05-07

lp-calculator-electorn An electron-vue project 国服EVE LP兑换计算器价格基于国服市场中心请注意兑换比例仅供参考，注意游戏中实际成交量，很多东西兑换比较高但是成交量极少，不要一股脑换完没法出货就傻眼了...

视频播放器：使用Electron和Node.js的视频播放器

02-04

视频播放器安装electron（新版electron会导致播放卡顿）安装node.js： brew install node 进入项目文件根目录：如果安装了新版本，则需将其删除： npm uninstall electron -g npm uninstall electron 安装旧版本（1.4.13）： npm install -g electron-prebuilt 或者npm install -g electron@1.4.13 clone后运行软件的方法在终端中进入项目根目录查看app运行情况： npm start 安装app打包程序： npm install elec

Electron-FolderView:浏览文件夹内容，包括图像幻灯片，可播放的视频，视频墙和方便的工具。专为Windows设计

05-26

电子文件夹视图我最初将其创建为nodejs应用程序以查看本地图像。我对自己拥有的免费和付费图像应用程序感到沮丧-我需要一些东西来简单地显示文件夹中的图像。有了许多可用于网络的出色图像处理库，我认为将某些东西放到节点上就足够简单了……然后，我发现了Electron的超赞之处！这个程序可以让我快速添加功能来处理各种文件管理任务。迫在眉睫的是能够快速查看媒体文件，而不会出现笨拙的小部件或ui chrome。使用Electron，我可以在Windows可执行文件中使用Web技术创建具有自定义功能的通用目录浏览器！这是一个正在进行的工作。随意使用和修改。特征主要目的是查看文件夹项目项目功能：复制，剪贴板...，删除，浏览，文件夹大小，打开，移动，重命名，将图像设置为背景，零网格中显示的项目网格功能：隐藏项目，过滤器，文件夹，最后一个文件夹，顺序，缩放，滚动，随机播放，

Electron+vue+node+wavesurfer 本地音乐播放器

12-07

Electron+vue+node+wavesurfer打造的本地音乐播放器，可以不用添加目录，播放本地文件系统内的任意音频文件，还能展示音频的波形，有项目说明文档，适合新手学习electron,vue,node

Electron+vue打造一个本地播放器(附项目代码)

m0_56169789的博客

04-01

972

个人觉得系统自带的菜单栏太丑了，就给设置了无边框再自己加上最小化，关闭的功能。最小化，关闭是通过ipc通信，渲染进程监听到有点击操作后，通知主进程进行相应的操作。渲染进程close() {},主进程app.quit();});});

gitblog_00045的博客

06-14

892

Electron+vue打造一个本地播放器(附项目代码)(1)

2401_84150165的博客

04-12

894

个人觉得系统自带的菜单栏太丑了，就给设置了无边框再自己加上最小化，关闭的功能。最小化，关闭是通过ipc通信，渲染进程监听到有点击操作后，通知主进程进行相应的操作。渲染进程close() {},主进程app.quit();});});资料过多，篇幅有限，需要文中全部资料可以点击这里获取前端面试资料PDF完整版！自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

Electron本地视频播放报错解决方法

AxCybersecurity的博客

09-20

886

这样一来，您就可以加载本地资源了，包括本地视频文件。本文向您介绍了在Electron应用程序中播放本地视频时可能遇到的报错，并提供了一种解决方法。通过在主进程代码中禁用Electron的安全策略，并在渲染进程中嵌入和播放视频文件，您可以顺利地在Electron应用程序中播放本地视频。因此，如果您的应用程序需要从不受信任的地方加载资源，或者涉及用户生成的内容，请确保采取适当的安全预防措施。然而，请记住，在禁用Electron的安全策略时要谨慎行事，并确保您的应用程序不会受到潜在的安全风险。

electron 学习之开始视频加载

繁夜

03-31

864

最开始的做法 <template> <div id="app"> <video v-if="!isStart" id="video" width="800" height="600" autoplay> <source src="/video/logo.mp4" type="video/mp4"> 您的浏览器不支持Video标签。 </video> <div id="content" v-i

基于electron的音视频播放器