pc win端桌面级视频播放器 +electron+vue+element

最新推荐文章于 2024-05-18 09:55:36 发布
最新推荐文章于 2024-05-18 09:55:36 发布
阅读量310 收藏
点赞数 1
分类专栏： 前端 vue.js js 文章标签： vue.js css es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zsq199771/article/details/115317698
版权
前端 同时被 3 个专栏收录
89 篇文章 0 订阅
订阅专栏
js
58 篇文章 0 订阅
订阅专栏
vue.js
48 篇文章 0 订阅
订阅专栏

首先
https://juejin.cn/post/6844904137482567688
这个给了很大启发
但是需要注意的点是控制视频进度的时候如果长时间拖动才松开会无作用，但是如果绑定到@input上的话视频会卡顿，等一下我会去找问题
还有就是作者是以15秒的视频做例子，自己需要加上长时间的视频的转换方式
electron的话注意安装过就不能打包了
electron一些js控制样式跟浏览器解析方式不同，写起来要注意格式
能写高度的最好写明高度，一些auto会失效
其他的没什么了，想起来在补充

星陈~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
只有你想不到，Electron也可以开发视频播放器
不安分的猿人的专栏
05-10 4392
## 一、桌面版视频播放器 今天又发现一款强大的开源软件，electron 开发的一个可以播放国内主流视频(腾讯、爱奇艺、优酷、芒果、乐视)的播放器。而且播放视频可直接跳过广告。好的开源项目第一时间分享给大家！ 二、开发环境搭建 2.1 前提 本地安装Node12.x+环境，Node.js是一个运行在服务端的JavaScript框架，主要用于创建快速的、可扩展的网络应用。 本地已安装VSCode开发工具（其他工具也可以）。 掌握Vue、Vuex基础语法。 Electron是由Github开发，用HTML，
Electron系列教程——第四篇：播放器的样子
其时十七的博客
12-27 7565
Electron系列教程——第四篇：播放器的样子一、楔子 终于要开始写播放器了。今天的任务是： 1，开启一个漂亮的界面 2，播放一首好听的歌曲 二、目录Electron系列教程第四篇播放器的样子 一楔子 二目录 三正文1挑选Audio组件 2项目结构变化 3运行音乐客户端 4调整了的细节 5总结三、正文　　上篇我们知道了渲染进程，知道了在该进程中会使用Chromium 来显示 w
EasyVideo用Electron和Vue全家桶开发的桌面端视频播放器
08-12
Easy-Video 用Electron和Vue全家桶开发的桌面端视频播放器
electron+vue网页直接播放RTSP视频流？
猿大师播放器—网页低延迟播放RTSP视频流专家
01-11 1138
原理：底层调用VLC播放器或FFPLAY播放器控件播放，理论上 VLC播放器和FFPLAY播放器能播放的视频格式，猿大师播放器都可以播放，支持本地硬件解码和加速，性能与桌面版播放器播放效果一样，这两款开源的播放程序，能支持目前已知的大部分视频格式。优势：成熟的商业软件，直接播放RTSP视频流，延迟低，最低300毫秒延迟，播放稳定，同时播放20路不卡顿，支持H.264和H.265格式，兼容最新版本主流浏览器，包含最新版Chrome，支持的协议和视频格式非常广泛。劣势：延迟高，有的甚至达到几秒或者十几秒。
自制桌面级视频播放器vue.js+electron+video.js+element-ui
zsq199771的博客
03-31 714
首先看我前几天的那个文章 其次 难点1 控制条，需要自己改源码的样式，不然electron有些样式权限会乱（其他没有引用的情况下） 用ref来控制，具体方法前几天的博客里可以找到 我的这个是需要图片视频来回切换的，所以比较麻烦 获取视频内容和进度条通过计算后相互绑定，但是因为那个videoTimeUpdate方法是实时运行的，所以你修改当前进度的时候快的话就会修改，慢的话会被videoTimeUpdate方法得到的下一个值所覆盖，也就是修改失效。 试了很多种方法，最后发现在外面一层的盒子里加上鼠标抬起
推荐开源项目：WebChimera.js - 强大的Electron VLC绑定库
最新发布
gitblog_00070的博客
05-18 476
推荐开源项目：WebChimera.js - 强大的Electron VLC绑定库 项目地址:https://gitcode.com/RSATom/WebChimera.js 1、项目介绍 WebChimera.js 是一个创新的开源项目，它为Electron框架提供了对libvlc的原生绑定。通过这个库，开发者可以在Web应用中利用VLC播放器的强大功能，包括音视频解码和流处理等。WebChim...
基于electron+vue3+vite2+ffmpeg+jsmpeg做个rtsp播放器
牧也の博客
04-12 6933
直接播放rtsp流的客户端
ffmpeg转后图像质量问题
jonfei的专栏
03-03 7849
转换后的视频质量是不可能高于转换前的视频质量的，除非你对每一帧图像都做图像增强、滤波等处理。在转换的过程中可以通过调节码率控制方式、目标码率以及编码的质量因子等参数来调节转换的视频质量，参考：http://bbs.chinavideo.org/viewthread.php?tid=69&extra=page%3D1 先从ffmpeg开始。http://ffmpeg.sourceforge.
Electron+vue打造一个本地播放器(附项目代码)
m0_56169789的博客
04-01 868
个人觉得系统自带的菜单栏太丑了，就给设置了无边框再自己加上最小化，关闭的功能。最小化，关闭是通过ipc通信，渲染进程监听到有点击操作后，通知主进程进行相应的操作。渲染进程close() {},主进程app.quit();});});
基于electron的音视频播放器
热门推荐
vgub158的博客
06-12 1万+
基于electron的音视频播放器前言选择做一个音视频播放器桌面应用程序原因技术的选型已经实现了的功能音视频播放实现右键菜单实现总结效果图安装包下载：[http://zhifa.daiqee.com/player%20Setup%200.0.1.exe](http://zhifa.daiqee.com/player%20Setup%200.0.1.exe)最后如果大家觉得我这个音视频播放器还可以的...
视频播放器：使用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-vue使用video标签循环播放视频，解决卡顿、闪烁。
weixin_47426048的博客
10-28 1646
【代码】electron-vue使用video标签循环播放视频，解决卡顿、闪烁。
使用 electron 做个播放器
dfpbut5000的博客
07-11 851
使用 electron 做个播放器 本文同步更新在：https://github.com/whxaxes/blog/issues/8 前言 虽然 electron 已经出来好长时间了，但是最近才玩了一下，写篇博文记录一下，以便日后回顾。 electron 的入门可以说是相当简单，官方提供了一个 quick start，很流畅的就可以跑起来一个应用。 为啥要做个播放器呢，因为我在很久很久...
electron与flash（播放，通信）
skyyywerq的博客
02-07 690
1，electron内置浏览器必须支持flash electron与chrome版本对应表 chrome版本88以后不支持flash，所以选择electron11之前的版本 2，cnpminstallelectron@11.0.0 不要用npminstall太慢了 3，在html的body中添加代码 <embed src="test.swf" width="1920" height="1080"/> 即可 ...
实时展示摄像头内容（go server + electron-vue client）
DisMisPres的博客
11-04 3143
起因 当前程序是以electron + vue作为前端，go作为后端http主服务。最近新来了一个需求，需要能够使用多个PC USB摄像头进行录像，并能够区分到底是哪个摄像头在录，这就需要前端页面能够实时的展示摄像头视频。 实现方式 浏览器支持(例：chrome)，直接调用js的MediaRecorder对象来处理，再通过electron提供的nodejs框架来处理文件的保存。 搭建rtmp服务器，通过推流（如：ffmpeg）和拉视频流的方式展示视频。 后端通过ffmpeg获取视频流，转成图片发给界面展示
vue-electron打包视频未播放
qq_43108067的博客
12-29 1902
在开发环境下视频可以正常加载并显示，但是一旦打包到生产环境下视频就无法播放，查阅发现electron-builder无法在生产环境下加载静态视频文件。 解决方法使用electron版本11以上的版本，并在主进程文件中加入代码stream: true，主进程文件在我们项目文件下的的src/background.js。 protocol.registerSchemesAsPrivileged([ { scheme: 'app', privileges: { secure: true, standard: t
H.265播放器EasyPlayer使用electron打包后不能播放的问题排查与解决
TSINGSEE青犀视频官方技术博客
03-20 399
在播放H.265视频时，出现了报错"Fetch API cannot load"。
Electron笔记五：无需控件，HTML5直接播放rtsp（摄像头）
bestyellow的专栏
07-28 2818
在写之前可以先看一下实际的效果 为了实现页面直接播放视频，我找了很多资料，
electron：1.video 标签加载大视频时，可能会遇到内存限制的问题而只显示音频
weixin_49015558的博客
07-18 1243
在 Electron 中，video 标签在加载大视频文件时，可能会遇到内存限制的问题而只显示音频。这是因为 Electron 默认情况下使用了 Chromium 的内存限制策略，对于大视频文件，它会尝试加载并播放音频，但限制视频的加载以节省内存。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

星陈~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值