web网页本地视频播放器

web本地视频播放器

实现功能需求:
1,禁用默认视频控制栏,自定义视频进度,音量控制栏
2,按空格,上下左右,实现视频暂停,音量加减,视频前进后退(除此在网页内禁用除了f5 f12 及视频操作键以外的键)
3,禁用鼠标在video时的滑轮事件改为音量
4,用input type=“file” 获取文件地址。可以上传多个视频,或文件夹,(过滤非MP4)
5,实现全屏,及全屏修改自定义控制栏样式
6,由于浏览器全屏时不能获取有关节点,则监听窗口变化并判断是否全屏来确定是否正在退出全屏。(全屏暂不兼容ie,有bug)
7,选择完本地视频后出现播放列表,点击播放列表播放对应视频。(默认第一集)
8,如果上传的文件记录和上次一样,自动跳转到上次的播放进度。
9,控制栏控件有进度条,音量条,播放/暂停 ,下一集,全屏的控件。
10,实现拖动进度条,音量条修改视频进度,及音量。
11,鼠标在video节点内无操作隐藏
12,其余见demo实例网页。

ps(选择本地视频时是上传视频所在的文件夹)

网页实例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
源码地址:源码

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值