自制桌面级视频播放器vue.js+electron+video.js+element-ui

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

首先看我前几天的那个文章
其次
难点1
在这里插入图片描述
控制条，需要自己改源码的样式，不然electron有些样式权限会乱（其他没有引用的情况下）
在这里插入图片描述
用ref来控制，具体方法前几天的博客里可以找到
我的这个是需要图片视频来回切换的，所以比较麻烦
在这里插入图片描述
获取视频内容和进度条通过计算后相互绑定，但是因为那个videoTimeUpdate方法是实时运行的，所以你修改当前进度的时候快的话就会修改，慢的话会被videoTimeUpdate方法得到的下一个值所覆盖，也就是修改失效。
试了很多种方法，最后发现在外面一层的盒子里加上鼠标抬起事件，最后在修改进度条的值，但是选择进度条的值需要用它给的@input方法（实时收到value值并保存最新覆盖刚上一帧的）存在全局变量里才能调用。
其他没什么难点了。想起来在补充

星陈~
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
专栏目录
EasyVideo用Electron和Vue全家桶开发的桌面端视频播放器
08-12
Easy-Video 用Electron和Vue全家桶开发的桌面端视频播放器
视频播放器：使用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
推荐开源项目：ZYPlayer - 一款强大的视频播放器
最新发布
gitblog_00082的博客
04-02 585
推荐开源项目：ZYPlayer - 一款强大的视频播放器 项目地址:https://gitcode.com/r9ronaldozhang/ZYPlayer 项目简介 ZYPlayer 是一个由开发者r9ronaldozhang创建并维护的开源视频播放器项目。它基于 Electron 框架构建，提供了丰富的功能和高度的自定义性，让用户体验到专业级别的多媒体播放。 技术分析 1. Electron框架...
基于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)最后如果大家觉得我这个音视频播放器还可以的...
pc win端桌面级视频播放器 +electron+vue+element
zsq199771的博客
03-30 294
首先 https://juejin.cn/post/6844904137482567688 这个给了很大启发 但是需要注意的点是控制视频进度的时候如果长时间拖动才松开会无作用，但是如果绑定到@input上的话视频会卡顿，等一下我会去找问题 还有就是作者是以15秒的视频做例子，自己需要加上长时间的视频的转换方式 electron的话注意安装过就不能打包了 electron一些js控制样式跟浏览器解析方式不同，写起来要注意格式 能写高度的最好写明高度，一些auto会失效 其他的没什么了，想起来在补充 ...
自制视频播放器
qq_42309685的博客
08-19 2179
自制是视频播放器 现在HTML5新增了很多视频制作方面的属性，比如控制音量(volume)的，视频进度(duration)的还有全屏(webkitRequestFullScreen)的，等等，很多很多，这就使得当对默认的视频播放器样式 不满意时，自己也可以做一个替换默认样式。 自制播放器样式效果如下： 录的比较仓促，媒体文件就一个视频，可以自己选择 引用的外部文件主要有一些字体文件，jquer...
做一个迷你播放器放在桌面
hejinde的专栏
09-25 642
效果如图 功能 随意选取歌曲，循环播放，有音谱效果，音量控制，显示歌曲名，歌曲控制（播放与暂停、下一首和上一首） 操作 将下面文件下载解压后放在MP3音乐文件夹内（该文件用FLASHPACKER打包） 打开此文件后，点击左上角按钮进入选取文件即可。 迷你播放器.rar(1.85 MB) 下面是AS3代码—————————————— //申明变量 var zhantingtime:Number
vue-min-chat:vue.js + Element UI + node.js + socket.io + mysql 实现在线聊天室
05-06
vue-min-chatvue.js + Element UI + node.js + socket.io + mysql 实现在线聊天系统附上截图支持钉钉机器人群聊通知Github 演示地址联系方式:e-mail: 电子邮件：:triangular_flag: 个人博客：:penguin: QQ交流群：
VUE.js+element-ui实现JSON编辑器
07-24
使用vue.js和element-ui实现的网页版的JSON编辑器，使用之前需要安装NODE.js和npm
electron-vue + vue-cli + element-ui 实时热更新版v12.0.4框架.rar
05-06
electron-vue + vue-cli + element-ui 实时热更新版，electronv12.0.4框架，打包好的框架，拿来即用，实时热更新，提高开发3倍效率
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。.zip
10-30
基于Vue+Vue-Router+Vuex+Element-ui+axios，参考小米商城，实现的电商项目。
前端全栈神技：网页秒变全平台app的Electron入门 视频
07-22
前端全栈神技：网页秒变全平台app的Electron入门 视频
用Vue+Element简单搭建的腾讯实时音视频通话(仅限桌面浏览器).rar
06-12
用Vue+Element搭建的腾讯实时音视频通话 仅限桌面浏览器，暂未搭建其他应用 使用前请先npm install安装依赖包 然后npm run serve既可看到效果 腾讯云 SDKAPPID和SECRETKEY，需要替换为您自己账号下的 SDKAppId。 进入腾讯云实时音视频[控制台](https://console.cloud.tencent.com/rav ) 创建应用，即可看到对应信息， 它是腾讯云用于区分客户的唯一标识。
electron-video:自助设备广告屏自动播放视频功能（Electron）
04-06
Electron视频播放Demo 实现功能 视频自动播放 视频循环播放 视频禁音 视频取消禁音 视频音量设置 相关博文：
使用 electron 做个播放器
dfpbut5000的博客
07-11 844
使用 electron 做个播放器 本文同步更新在：https://github.com/whxaxes/blog/issues/8 前言 虽然 electron 已经出来好长时间了，但是最近才玩了一下，写篇博文记录一下，以便日后回顾。 electron 的入门可以说是相当简单，官方提供了一个 quick start，很流畅的就可以跑起来一个应用。 为啥要做个播放器呢，因为我在很久很久...
只有你想不到，Electron也可以开发视频播放器
不安分的猿人的专栏
05-10 4338
## 一、桌面版视频播放器 今天又发现一款强大的开源软件，electron 开发的一个可以播放国内主流视频(腾讯、爱奇艺、优酷、芒果、乐视)的播放器。而且播放视频可直接跳过广告。好的开源项目第一时间分享给大家！ 二、开发环境搭建 2.1 前提 本地安装Node12.x+环境，Node.js是一个运行在服务端的JavaScript框架，主要用于创建快速的、可扩展的网络应用。 本地已安装VSCode开发工具（其他工具也可以）。 掌握Vue、Vuex基础语法。 Electron是由Github开发，用HTML，
sse+nodejs+vue+electron+element+video.js
zsq199771的博客
04-16 428
前端互相控制 sse + nodejs 两个服务，一个长连接对内 前端部分 sse(){ this.source = new EventSource(“http://192.168.22.234:8088/sse”); this.source.addEventListener( “open”, function () { console.log(“建立连接”); }, false ); this.source.addEventListener( “connecttime”, function (e) { c
实时展示摄像头内容（go server + electron-vue client）
DisMisPres的博客
11-04 3053
起因 当前程序是以electron + vue作为前端，go作为后端http主服务。最近新来了一个需求，需要能够使用多个PC USB摄像头进行录像，并能够区分到底是哪个摄像头在录，这就需要前端页面能够实时的展示摄像头视频。 实现方式 浏览器支持(例：chrome)，直接调用js的MediaRecorder对象来处理，再通过electron提供的nodejs框架来处理文件的保存。 搭建rtmp服务器，通过推流（如：ffmpeg）和拉视频流的方式展示视频。 后端通过ffmpeg获取视频流，转成图片发给界面展示
Vue+Vuex+Element-ui实现歌曲播放控件、播放列表功能
weixin_44200288的博客
05-24 4970
写在前面： 根据思路写代码和写文章的区别还是挺大的，后者更多需要的是一个总结表述的能力，以及需要判断文章中呈现的东西是否有价值。做笔记和写博客同样是在记录，而博客还承担了一个供别人浏览的职能，所以如何把自己的逻辑表达得让大众都能理解，也是一个值得研究的地方。 由于个人技术的影响，文章中可能会出现一些错误，小到格式排版，大到逻辑错误都正常，所以写博客的原因主要是： 帮助重新梳理自己的逻辑，记录自己的学习过程 希望能与更多伙伴进行技术上的交流，如果还能大佬指出问题或提一些建议，那就是赚到 如果还能帮到一些可能
vue.js+element ui+node.js+socket.io+mysql
05-15
Vue.js 是一种现代的JavaScript框架，用于构建向响应式Web应用程序。它的核心思想是将大型应用程序分割成更小的,可重用的组件。 Element UI 是Vue.js的一个组件框架，提供了许多可轻松集成到Vue.js应用程序中，并对HTML和CSS进行了巧妙组合的组件。 Node.js 是JavaScript运行时环境，使得开发人员可以在服务器端使用JavaScript编写代码。它是一种轻量级的技术堆栈和可扩展Web服务器， 由于它非阻塞的特性，具有高并发性能。 Socket.io 是WebSocket库，它使得客户端和服务器之间可以实时交互数据，而不必等待HTTP的请求和响应的时间延迟时间，从而实现了实时的双向通信。 MySQL 是一个关系型数据库管理系统，是全球最流行的开源数据存储，用于存储和管理数据。 这些技术的组合可以用于构建高性能，实时响应，具有良好用户体验的Web应用程序。 例如，可以使用Vue.js和Element UI开发具有漂亮的前端设计的应用程序，使用不阻塞I/O的特性和事件驱动的架构，Node.js可以实现高效的后端服务。而MySQL数据库可以处理数据存储和检索。通过与Socket.io集成，可以实现实时交互和数据推送，增强应用程序的实时性。因此可以看到，Vue.js, Element UI， Node.js, Socket.io和MySQL 这些技术的组合，是构建响应式，高性能，可扩展Web应用程序之所需技术栈。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

星陈~

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

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

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

打赏作者

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

抵扣说明：

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

余额充值