众多 Chrome 浏览器扩展中,有一款必推插件它的中文名字叫油猴,被称为最强的浏览器插件,但更多人称它为神器!油猴 (Tampermonkey) ,这款扩展本身支持 Chrome、Firefox、Microsoft Edge、Safari 等多家浏览器平台,而且分为 Stable、Beta 两条产品线,适应不同的用户需求。
用户在安装了 Tampermonkey 扩展后,可以在 Greasy Fork、 OpenUserJS 网站上找到各种实用脚本,按需安装好脚本后,可为网站添加新的功能,有些能使网站的界面更加易用,有些则能隐藏网站上烦人的部分内容。
今天给大家推荐一款N 合一的视频播放增强脚本 h5player,用一款脚本就可以为视频网站的在线视频播放器添加多项便捷的控制功能,包括倍速播放、画中画、网页全屏、截图,以及视频画质调整(调节亮度、饱和度、对比度)等。
https://greasyfork.org/scripts/381682
h5player 下载链接: https://greasyfork.org/scripts/381682
H5player 脚本支持包括 Bilibili、爱奇艺、QQ音乐MV频道、微博视频频道、优酷、搜狐等多家国内网站,刚开始安装好这款脚本,可能用户还察觉不到播放器控制按钮的任何变化,其实h5player 脚本是通过丰富的快捷键组合来实现各种功能,在视频播放器页面中找不到相应的按钮入口。下面是我整理的比较常用的快捷键列表:
ctrl+\ 快捷键是否全网页可用,默认true
Ctrl+space 禁用/启用 该播放插件
→ 快进5秒
← 后退5秒
Ctrl+→ 快进30秒
Ctrl+← 后退30秒
↑ 音量升高 10%
↓ 音量降低 10%
Ctrl+↑ 音量升高 20%
Ctrl+↓ 音量降低 20%
C 加速播放 +0.1
X 减速播放 -0.1
其他快捷键可以通过 下载的介绍页面 找到介绍。记住快捷键,你会发现这款插件超好用!
比如针对倍速播放,h5player 脚本提供了多达十几倍甚至数十倍的速度播放视频,通过 C、X 快捷键以 0.1 的速度逐渐加速或者减速,脚本还能够自动记录上一次调整好的播放速度。
李子柒今天更新了哦~!
h5player 脚本还提供了逐帧控制的功能,通过 D、F 控制上下一帧的播放,可以找到质量最佳的一帧后,再去截图获得最好的视频画面,甚至通过快捷键为当前画面加模糊、调整对比度/色相等画质控制,实现不一样的截图效果。
左上角可以逐帧播放
视频画中画功能(shift+P)可以在页面滚动时,以小窗口的形式方便用户观看视频,h5player 脚本则让允许通过快捷键快速实现画中画效果,即使切换至非当前标签页时,还能够以画中画形式继续观看视频,而且支持拖拽的改变大小!
Shift+P 画中画
#科技V计划# #
ouku HTML5 播放器扩展 —— 告别 flash 和广告
https://github.com/esterTion/Youku-HTML5-Player
所周知,HTML5 已经可以很好的支持 Audio 和 Vedio 了,我们可以方便的在网页添加多媒体控件。
本文将围绕如何通过 CSS 来修改 HTML5 的默认样式,撇开 JS 实现方式。当然,后续还会推出一篇文章:打造与众不同的 Audio 播放器,先占个坑吧!
一、Audio 结构
Audio 的用法很简单,插入下面的代码,一个原生音频播放器就完成了:
二、属性一览
三、兼容性
从上图可以看到,基本上所有浏览器都支持了 Audio 标签,所以我们完全可以大胆的使用。
四、设计师的要求
先来看看设计稿:
再来看看 HTML5 原生 Audio:
你可能发现了问题:要么改样式,要么重写音频播放器。
五、问题窘境
当我们打开开发者工具审查 Audio 元素的时候,除了 Audio 标签,什么也看不到。
这时候,肯定有人想这么改:
那么问题来了,如果只通过修改样式,能不能达到修改音频播放器的外观的功能呢?
六、最终方案
答案是肯定的,我们来覆写 Audio 内置的一些全局样式,如:
我们罗列出了一些播放器可供修改的样式属性:
1.控制面板
2.音量
3.播放按钮
4.时间轴
5.当前时间/剩余时间
6.前进/后退
7.全屏
...
还有很多,这里就不列举了。找到这些属性对应的内置 CSS 类,就可以随心所欲的定制了。
七、并不完美
按照上面 CSS 样式修改,乍一看,好像和设计出入不大。然而我们碰到了更细节的问题,具体如下:
怎么办,这是个问题,距离设计师与众不同的音频播放器就差一步之遥了!
八、继续探索
首先,突破点在于能否找到一个 pause 的样式类,来解决上述问题一。
其次,play 和 pause 如何触发图片互换。
我们知道,通过 audio::-webkit-media-controls-play-button 可以重新定义播放按钮的外观样式。
那么,是否存在:audio::-webkit-media-controls-paused-button 这个全局属性呢?
我们继续看看问题二:播放进度 slider 和 声音 slider 无法修改样式
audio::-webkit-media-controls-volume-slider, video::-webkit-media-controls-volume-slider { background-color: initial; border: initial; color: inherit; margin: initial; }
属性是支持的,为何并没有其作用呢?国外友人是这么回答的:
styling the timeline thumb through CSS doesn't seem possible at the moment.
看起来并没有什么办法,然后我们可以变通一下,既然改不了,那就遮盖处理:
问题解决,工作完成,Perfect!
*请认真填写需求信息,我们会在24小时内与您取得联系。