网页视频加速

在网页听课过程，看到有同学反映视频速度节奏略慢，所以就想着怎么能够对网页视频加速。查找教程过程发现，大家一致性的选择对 html5 播放器播放的视频进行修改（可以理解，毕竟是主流），修改方法是通过js代码，在浏览器的控制台console中实现加速。那么通过实验，总结出如下适用于课程视频加速方法。

过程很简单，主要用到的是

1.playbackRate播放速率（浮动）：当前播放速度：1.0 是正常的，2.0 快两倍，-3.0 是快三倍等

首先需要在在浏览器中打开审查元素，找到控制台consol

之后输入以下代码，调整playbackRate参数，完成网页视频速率的改变 document.querySelector('video').playbackRate = 3.0;

查询过程找到有关于html5播放器更多设置属性，有一定的参考价值，也翻译留下，等着前端熟悉到一定程度尝试着应用，如下。在末尾处留下html5播放器属性介绍原文网址。

HTML 5视频和Mootools

这是关于使用Mootools 1.2编写HTML 5视频标签的脚本。

有人会问，视频标签有什么特别之处？乍一看，它像其他任何元素一样都是HTML元素。但是，如果您尝试使用某些mootools函数（添加事件或查询属性），您很快就会意识到，在当前版本中，它并不是开箱即用的。但是有一种解决方法。

在Lighthouse（mootools bugtracking）上阅读有关它的更多信息»

简而言之：要访问视频属性（如$（'myvid'）。currentTime）或通过mootools附加新事件（如volumechange），可以使用以下解决方法：

var media_events = {     loadstart：2，进度：2，暂停：2，中止：2，     错误：2，清空：2，停滞：2，播放：2，暂停：2     loadedmetadata：2，loadeddata：2，等待中：2，播放中：2，     canplay：2，canplaythrough：2，寻求：2，寻求：2     timeupdate：2，结束：2，速率更改：2，持续时间更改：2，音量更改：2 } Element.NativeEvents = $ merge（Element.NativeEvents，media_events）;  var media_properties = [ 'videoWidth'，'videoHeight'，'readyState'，'autobuffer'， '错误'，'网络状态'，'当前时间'，'持续时间'，'暂停'，'搜索'， “结束”，“自动播放”，“循环”，“控件”，“音量”，“静音”， 'startTime'，'buffered'，'defaultPlaybackRate'，'playbackRate'，'played'，'seekable'//这6个属性目前在firefox中不起作用  ];  media_properties.each（function（prop）{ Element.Properties.set（prop，{ 设置：函数（值）{ this [prop] =值； }， 得到：function（）{ 返回这个[prop]; } }） }）;

请注意：在mootools-core中实施之前，这只是一个快速的解决方法。

您可以在下面的演示中看到所有内容

这非常简单（使用上述解决方法）：

快退 播放 暂停

我们使用一个跨度来显示视频播放的当前时间，并使用以下时间更新事件来对其进行连续更新：

$（'myvid'）。addEvent（'timeupdate'，function（an_event）{ $（'timemeter'）。set（'html'，this.get（'currentTime'）。toFixed（1））; }）;

也没有火箭科学，但我们必须注意不要超过体积的限制（从0.0到1.0）：

 vol-  .9？1.0：$（'myvid'）。get（'volume'） + 0.10）“> vol +   1.0 

我们想将当前的音量显示为数字。因此，我们使用“ volumechange”事件并在每次触发该事件时更新一个简单的SPAN：

$（'myvid'）。addEvent（'volumechange'，function（an_event）{ $（'volmeter'）。set（'html'，this.get（'volume'）。toFixed（1））; }）;

视频的静音状态会覆盖当前的音量设置。这是一个切换按钮（开/关），因此实现也非常简单：

静音

按钮还可以，但是通常我们是通过滑块或旋钮来控制音量的。因此，让我们使用mootools Slider（来自mootools.more）以十个步骤控制音量。

首先，我们需要一个容器和一个旋钮，这里需要一个段落和一个按钮：

  vol  

现在我们设置mootools Slider并使用其onComplete事件相应地更改音量：

var mySlider = new Slider（'volSliderBg'，'volSlider'，{     范围：[0，100]，     车轮：是的，     snap：是的，     步骤：10，     initialStep：100，     onComplete：函数（步骤）{ $（'myvid'）。set（'volume'，（step.toInt（）/ 100））;     } }）;

如您所见，通过应用上述解决方法，我们很自然地可以使用新的属性和事件来构建我们的自定义视频控件。

HTML 5视频– DOM属性和事件

最后一篇文章是关于HTML 5视频标签的，现在我们来看一下DOM方面：属性和事件。

除了标准属性（例如宽度，高度，id…）之外，还有一些特定于视频标签的属性。

准确地说：这些属性并非全部针对视频标签，某些属性也用于音频标签。

src （字符串）：源文件

poster （URL）：在视频播放之前显示的图像

controls （布尔值）：浏览器是否提供了播放控件？

videoWidth, videoHeight （整数）：原始视频大小

currentTime （浮动）：当前播放时间（以秒为单位）

startTime* （浮动）：视频开始时间（例如，如果视频不是从0.0开始-例如流）

duration （浮动）：持续时间（以秒为单位）

paused （布尔值）：视频当前是否已暂停？

ended （布尔值）：视频结束了吗？

autoplay （布尔值）：是否设置为自动播放？

loop （布尔值）：是否设置为循环播放？

autobuffer （布尔值）：浏览器是否应该立即开始缓冲视频？

seeking （布尔值）：浏览器当前正在视频中搜索吗？

defaultPlaybackRate* （浮动）：视频播放的播放速度

playbackRate* （浮动）：当前播放速度：1.0是正常速度，2.0是前进速度的两倍，-3.0是后退速度的三倍，依此类推

seekable* （TimeRanges）：浏览器可以在其中寻找范围的对象（有关此内容的更多信息，请参见下文）

buffered* （TimeRanges）：一个范围已缓冲的对象

played* （TimeRanges）：用户已经玩过的范围对象

volume （浮动）：当前音量-从0.0到1.0

muted （布尔值）：视频是否静音？优先处理音量

readyState （int）：视频状态（下面的说明）

networkState （int）：网络状态（以下说明）

error （MediaError）：如果出现问题，则为媒体错误对象

*：此属性当前在Firefox中不起作用

您可以想象，某些属性为只读（持续时间，结束，readyState）–一些属性可以读取和写入，例如volume，currentTime。

您可以像这样访问Javascript中的这些属性：

var myvid = document.getElementById（'vid'）; myvid.muted = false; myvid.currentTime = 0.0; 如果（myvid.ended）{...}

如果发生错误，您可以阅读错误代码以作出反应-当前支持以下错误代码：

MEDIA_ERR_ABORTED (1) 用户中止视频播放

MEDIA_ERR_NETWORK (2) 网络错误（无法读取流）

MEDIA_ERR_DECODE (3) 解码错误，视频损坏或编解码器出现问题

MEDIA_ERR_SRC_NOT_SUPPORTED (4) 不支持该格式

用法（因此，最好使用事件，但稍后会更多）：

var myvid = document.getElementById（'vid'）; 如果（myvid.error）{  开关（myvid.error.code）{ 情况MEDIA_ERR_ABORTED： alert（“您停止了视频。”）; 打破; 情况MEDIA_ERR_NETWORK： alert（“网络错误-请稍后重试。”）; 打破; 情况MEDIA_ERR_DECODE： alert（“视频坏了..”）; 打破; 情况MEDIA_ERR_SRC_NOT_SUPPORTED： alert（“对不起，您的浏览器无法播放此视频。”）; 打破;  } }

这些状态定义如下（首先是网络，然后是就绪状态）：

NETWORK_EMPTY (0) 尚未初始化

NETWORK_IDLE (1) 网络目前未使用（例如，视频已完全加载）

NETWORK_LOADING (2) 浏览器正在从网络加载数据

NETWORK_LOADED (3) 数据已加载

NETWORK_NO_SOURCE (4) 找不到/加载视频资源

网络状态的文档在大多数站点上都不正确，因此最好参考上述状态。

HAVE_NOTHING (0) 无可用数据

HAVE_METADATA (1) 持续时间和尺寸可用

HAVE_CURRENT_DATA (2) 当前位置的数据可用

HAVE_FUTURE_DATA (3) 可获得当前和将来头寸的数据，因此可以开始播放

HAVE_ENOUGH_DATA (4) 有足够的数据播放整个视频

为了控制视频播放，我们还需要事件，这里提供了事件列表：

loadstart 浏览器开始加载数据

progress 浏览器加载数据

suspend 浏览器未加载数据，正在等待

abort 数据加载中止

error 发生错误

emptied 数据未意外出现

stalled 数据传输停止

play 视频开始播放（使用play（）触发）

pause 视频已暂停（使用pause（）触发）

loadedmetadata 载入元数据

loadeddata 数据加载

waiting 等待更多数据

playing 播放开始

canplay 可以播放视频，但可能必须停止以缓冲内容

canplaythrough 足够的数据来播放整个视频

seeking 寻找是真实的（浏览器寻找位置）

seeked 寻找现在是错误的（找到位置）

timeupdate currentTime已更改

ended 视频已结束

ratechange 播放速率已更改

durationchange 持续时间已更改（对于流）

volumechange 音量已改变

转载自

https://www.chipwreck.de/blog/2010/03/01/html-5-video-dom-attributes-and-events/

https://www.chipwreck.de/blog/2010/03/02/html-5-video-mootools/

视频 媒体处理

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。