electron-player基于 electron-vue 的音视频播放器

联合创作 · 2023-09-29 19:56

electron-player 是一个基于 electron-vue 的音视频播放器。

相关技术

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

已实现功能

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

效果图

效果图1

效果图2

效果图3

效果图4

效果图5

效果图6

效果图7

浏览 18
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报