整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML5视频播放器-油猴脚本推荐

众多 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 和广告

部分功能说明

  • 清晰度切换位于播放器左下角,采用智能记忆模式
  • (如一个视频有 标 高 超,点了高后会记住高清,但是点超后会清除,如果进入一个有原画的会选择原画(最高清晰度))
  • 弹幕开关、设置、屏蔽,播放器音量均会自动记忆
  • 含有多个音频语言的视频可以在右键菜单中切换,同类剧集间切换时临时记忆所选语言
  • 多个语言的视频中,选择的语言为临时记忆,在剧集内切换时保留,打开其他没有同种语言的视频会丢弃已记忆语言
  • 在视频播放器下方功能区中,下载按钮现在正如其名,含有下载功能
  • 播放器各项设置现已整合进侧栏,通过右下按钮开启

其他浏览器?

  • Safari扩展没有跨域特权,无法获取视频地址及正常播放
  • Edge扩展整体残缺,无法可靠使用

使用组件

  • flv.js
  • ABPlayer-bilibili-ver(有改动)

项目地址

https://github.com/esterTion/Youku-HTML5-Player

所周知,HTML5 已经可以很好的支持 Audio 和 Vedio 了,我们可以方便的在网页添加多媒体控件。

然而,设计师总是与众不同,修改 Audio 默认样式已成常态。

本文将围绕如何通过 CSS 来修改 HTML5 的默认样式,撇开 JS 实现方式。当然,后续还会推出一篇文章:打造与众不同的 Audio 播放器,先占个坑吧!

一、Audio 结构

Audio 的用法很简单,插入下面的代码,一个原生音频播放器就完成了:

二、属性一览

  • autoplay:如果出现该属性,则音频在就绪后马上播放。
  • controls:如果出现该属性,则向用户显示控件,比如播放按钮。
  • loop:如果出现该属性,则每当音频结束时重新开始播放。
  • preload:如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用 “autoplay”,则忽略该属性。
  • src:要播放的音频的 URL。

三、兼容性

从上图可以看到,基本上所有浏览器都支持了 Audio 标签,所以我们完全可以大胆的使用。

四、设计师的要求

先来看看设计稿:

再来看看 HTML5 原生 Audio:

你可能发现了问题:要么改样式,要么重写音频播放器。

有没有一种代价最小,见效又快的方式呢?

五、问题窘境

当我们打开开发者工具审查 Audio 元素的时候,除了 Audio 标签,什么也看不到。

这时候,肯定有人想这么改:

然而,并没有什么作用,一切照旧。

那么问题来了,如果只通过修改样式,能不能达到修改音频播放器的外观的功能呢?

六、最终方案

答案是肯定的,我们来覆写 Audio 内置的一些全局样式,如:

我们罗列出了一些播放器可供修改的样式属性

1.控制面板

2.音量

3.播放按钮

4.时间轴

5.当前时间/剩余时间

6.前进/后退

7.全屏

...

还有很多,这里就不列举了。找到这些属性对应的内置 CSS 类,就可以随心所欲的定制了。

七、并不完美

按照上面 CSS 样式修改,乍一看,好像和设计出入不大。然而我们碰到了更细节的问题,具体如下:

  1. 播放/暂停 按钮不能替换;
  2. 播放进度 slider 和 声音 slider 无法修改样式;

怎么办,这是个问题,距离设计师与众不同的音频播放器就差一步之遥了!

八、继续探索

首先,突破点在于能否找到一个 pause 的样式类,来解决上述问题一。

其次,play 和 pause 如何触发图片互换。

我们知道,通过 audio::-webkit-media-controls-play-button 可以重新定义播放按钮的外观样式。

那么,是否存在:audio::-webkit-media-controls-paused-button 这个全局属性呢

Google 翻阅源码,确实找到了 pause 操作。至此,问题一解决。

我们继续看看问题二:播放进度 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!