• Stars
    star
    367
  • Rank 116,257 (Top 3 %)
  • Language
    CSS
  • License
    MIT License
  • Created almost 6 years ago
  • Updated 7 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

electron-vue音视频播放器

electron-player

音视频播放器

Build Setup

# install dependencies(安装依赖)
npm install

# serve with hot reload at localhost:9080(运行开发环境)
npm run dev

# build electron application for production(打包生产环境)
npm run build

安装包:http://120.79.209.208:9093/player.exe


音视频播放器介绍

相关技术

  • electron:负责构建播放器的所需要的环境,提供访问系统资源的api(调用资源管理器,浏览器等等)以及打包成桌面应用程序
  • vue:负责构建播放器的界面
  • node:负责处理文件和路径问题,主要使用fs和path这2个模块
  • express:负责把视频读取出来,把视频以流的形式返回
  • html5相关技术:拖拽api,全屏api,Notification消息通知
  • DPlayer:音视频播放器核心组件
  • vue-i18n : 实现国际化(中英文切换)
  • mousetrap : 实现键盘组合监听
  • electron-updater : 实现自动更新功能

已实现功能

  • 视频播放:目前已经支持大多数视频格式,比如 MP4、WebM、mkv、avi、WMV、FLV、rmvb 等,后续会添加更多的视频格式
  • 音频播放:目前已经支持大多是音频格式,比如 MP3 等,后续会添加更多的音频格式
  • 换肤功能:该功能类似其他软件的换肤功能,用户可以根据自己的喜好选择不同的主题皮肤
  • 历史记录:音视频播放器会自动记录用户播放已经过的的视频或音频,比如音频或视频播放到那个时间
  • 记忆功能:音视频播放器会自动保存用户的操作和修改的配置,比如用户更换了主题皮肤,用户关闭了应用后再次打开,音视频播放器会应用用户已经修改的主题皮肤。用户对视频或音频进行加速等操作都会被记忆下来,用户再次点击该视频或音频就会恢复用户的操作
  • 播放模式:播放模式主要有5种,分别是 单个播放、单个循环、循环播放列表、顺序播放、随机播放
  • 排序模式:排序模式主要有5种,分别是 默认排序、大小排序、时间排序、随机排序、名称排序
  • 置顶功能:保持应用界面始终在最顶端
  • 加减速功能:音视频加速或者减速播放
  • 拖拽文件或文件夹:用户可以把文件或者文件夹拖拽进音视频播放器中,应用会过滤掉不能播放的文件
  • 全屏功能:实现了应用的全屏功能,这里是使用了electron提供的全屏api,没有使用html5的全屏api
  • 右键菜单功能:目前已经实现了大多数右键菜单的功能,没实现的后续实现
  • 国际化:目前已经实现了中英文切换,后期有需要再继续实现其他语言
  • 自动更新功能

效果图

效果图1

效果图2

效果图3

效果图4

效果图5

效果图6

效果图7

效果图8

如果有喜欢的欢迎给我点赞star

More Repositories

1

lin-view-ui

基于vue2.0的pc端组件
Vue
72
star
2

media-player

H5视频播放器,可自定义插件
TypeScript
41
star
3

html5-online-answer-page

毕业设计—基于vue2的在线答题系统前端
Vue
28
star
4

lin-wx-ui

微信小程序原生ui组件库
TypeScript
25
star
5

html5-online-answer-background

毕业设计—基于express,redis,mongodb在线答题系统后台
JavaScript
20
star
6

axios-analysis

axios源码深入解读
JavaScript
6
star
7

next.js-learn

慕课网学习课程—next.js 学习
JavaScript
4
star
8

personal-website

个人网站(前端+后台)
JavaScript
3
star
9

webpack4-react-multipage

webpack4+react配置多页面移动端应用程序
JavaScript
3
star
10

electron-markdown-editor

慕课网学习课程—electron+react+七牛云 实现markdown编辑器
JavaScript
2
star
11

react-ui

慕课网学习课程—react+typescript组件库
TypeScript
2
star
12

vue-music

慕课网学习课程—基于vue2全家桶音乐播放器
Vue
2
star
13

static-server

静态资源服务
JavaScript
2
star
14

lin-cli

模仿create-react-app的脚手架,快速搭建react自定义项目环境
JavaScript
2
star
15

wx-ReadAndMovie

慕课网学习课程—基于原生的电影与阅读微信小程序
JavaScript
1
star
16

vue-analysis

vue2源码阅读
JavaScript
1
star
17

cnode

慕课网学习课程—react+mobx+ssr
JavaScript
1
star
18

vue-ssr

vue ssr 服务端渲染
JavaScript
1
star
19

reptilian

慕课网学习课程—基于node+puppeteer的图片爬虫
JavaScript
1
star
20

mpvue-bookMessage

慕课网学习课程—基于mpvue的图书管理微信小程序
JavaScript
1
star
21

background-template

后台管理模板
JavaScript
1
star
22

video-screenshot

视频缩略图生成工具
JavaScript
1
star
23

react-multipage-template

基于webpack4+react的多页面模板,用于自定义脚手架的模板下载
JavaScript
1
star
24

react-chat

慕课网学习课程—基于react全家桶和websocket的聊天App
JavaScript
1
star
25

css3-animation

黑马程序员学习课程—css3-animation
CSS
1
star
26

wechat-mini-program

微信小程序底层框架原理
JavaScript
1
star
27

CnodeHarmony

cnode鸿蒙版
TypeScript
1
star