整合营销服务商

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

免费咨询热线:

「教程」在线网络视频播放加速那些事儿

期文章可能比较长,各位耐心看哈。本文主要探讨在线网络视频的倍速播放问题,涉及到电脑(Windows系统)、安卓、iOS三大平台

一、简介

所谓视频倍速播放一般就是视频播放速度0.2-12倍之类的速度播放视频,好多愿意看电视剧或者刷网课的,想要快点看视频,这个就非常需要了。

一般如果视频下载到本地,那倍速播放很简单了,主流播放器一般都有倍速播放功能。

所以本文主要说的是在线视频倍速播放策略,当然一些自带倍速播放类似B站的不在讨论范围之内。

二、电脑(Windows系统)实测

Enounce MySpeed是一款功能强大的在线音视频播放速度控制工具,它可以增加或降低网页内的音视频播放速度,最快可增加5倍的播放速度,最慢可比正常速度慢3倍。Enounce MySpeed支持在线Flash和HTML5音视频播放,适用于急性子。

下载,解压,直接打开软件,如下:

当然,3倍如果嫌慢,可以在软件设置里改成5倍速度。

比如用谷歌浏览器(部分浏览器不行,自行测试)打开一个视频,通过调节此软件播放速度,即可实现视频播放速度的改变。

三、安卓实测

1、一般网页视频倍速播放

原理:也是利用嗅探软件嗅探出网络视频直链,在VLC播放器等支持网络串流播放的本地播放器进行倍速播放。

嗅探软件:我们采用米侠浏览器或者GetVideo。

播放器:我们采用VLC播放器或者MX PLAYER。

实测:以米侠浏览器和MX PLAYER进行测试。

测试打开网易公开课的一个视频,如下点击嗅探,调用外部播放器播放选择MX PLAYER即可。

然后,在MX PLAYER里如下设置即可实现倍速播放。

比如用谷歌浏览器(部分浏览器不行,自行测试)打开一个视频,通过调节此软件播放速度,即可实现视频播放速度的改变。

2、百度网盘视频倍速播放

原理:利用ES文件管理器内置的百度网盘功能,直接调用MX PLAYER等播放器播放。

软件:ES文件管理器。

播放器:我们采用VLC播放器或者MX PLAYER。

实测

打开ES文件管理器,如下在设置—网络里选择百度网盘登陆,找到视频文件调用MX PLAYER即可,然后倍速播放上面已说过。

四、iOS实测

1、一般网页视频倍速播放

原理:利用嗅探软件嗅探出网络视频直链,在MX PLAYER或VCL等支持网络串流播放的本地播放器进行倍速播放。

嗅探软件:指尖浏览器。

播放器:VLC播放器。

实测:以网易公开课视频为例

下载安装指尖浏览器打开,直奔主题,测试进入网易公开课,点击视频播放,如下会弹出悬浮视频播放窗,我们选择复制链接即可。

然后,在VLC播放器里如下粘贴复制的链接,即可实现0.2-4倍速播放。

2、百度网盘视频倍速播放

原理:利单纯的靠iOS系统目前没发现解决办法,只能利用安卓或者电脑端的百度网盘直链解析软件解析出地址,再调用VLC播放器播放。

软件:电脑端或安卓端的百度网盘直链解析软件或插件(往期文章有,此处不细说)。

播放器:VLC播放器。

话不多说,自行体会才是真,相信此教程肯定有适用于自己工作学习娱乐的地方。

于刚接触这项技术的小白来说,对HTML5还不能清晰的认识,想入门又不知道该从何处下手,本文将整理几本关于HTML5的书籍,希望对大家有所帮助。

1、《Head First HTML5 Programming(中文版)》




Head First系列的书籍已经推荐过很多次了,的确很适合新手入门阅读,在这本书中你将会了解HTML5新API的基础知识,并学习这些API如何与你的页面交互,JavaScript如何为这些API助一臂之力,以及如何使用这些API来构建让你的老板和朋友对你刮目相看的Web应用。

2、《HTML5权威指南》


是系统学习网页设计的权威参考图书,第一部分将会像你解释HTML5相关的基础知识以及新功能,第二部分讨论HTML 元素,并详细说明了HTML5中新增和修改的元素;第三部分阐述CSS,涵盖了所有控制内容样式的CSS 选择器和属性,并辅以大量代码示例和图示;第四部分介绍DOM,剖析如何用JavaScript 操纵HTML 内容;第五部分讲解Ajax、多媒体和canvas 元素等HTML5 高级特性。

3、《HTML5高级程序设计》


本书介绍了几乎所有主要的HTML 5特性,除了常见的Canvas、VideoAudio、Geolocation之外,还包括后台处理特性Web Workers、全双工通信WebSockets等泛HTML5的技术,内容非常全面,读者可以通过这本书对HTML 5的各个知识点有一个完整的了解。

4、《HTML5秘籍》


本书是一本让你通俗了解HTML5新技术的一本好书。书中从基础的HTML5新标签、音视频,画布功能、HTML5支持的CSS3功能等进行讲解,最后还讲解了几个很适用的就是离线应用,地理位置,服务端通信等等,此外,文中示例代码都十分通俗易懂,相信只要你认真去学都能有所收获。

5、《HTML5 实战》



本书是一本全面介绍运用HTML5开发Web应用的书籍,包括了数据存储、通信以及如何创建视频游戏等诸多内容。本书内容结构清晰,示例完整,适合于对JavaScript和HTML语法有一定基础的Web开发人员阅读。

6、《HTML5 and CSS3 All-in-One For Dummies》



HTML5和CSS3是创建动态网站的必备工具,拥有更新和增强功能,可以使你的网站更加独特。这个友好的一体化指南涵盖了你需要了解的有关这些技术及其最新版本的所有信息。这个新版本以前两个版本的为基础,向介绍HTML5和CSS3的基础知识,然后介绍如何使用它们与JavaScript,MySQL和Ajax一起创建网站。

7、《Developing Mobile Websites with HTML5》


作者David Karlins将美学和技术结合在一本书中,该书适合各个级别的设计师阅读,涵盖构建动画和交互式移动网络应用程序,理解和应用样式到移动网站,创建移动设备 - 友好的表单和从用户收集数据,以及使用JavaScript库,JavaScript小部件和层叠样式表(CSS)。在当今快速发展的技术市场中,移动设备不是附加设备,而是必不可少的。通过HTML5开发移动网站,开始行动。

8、《HTML5 App商业开发实战教程》



主要围绕HTML5相关技术讲解基于WeX5可视化开发平台的移动WebApp应用程序开发。本书已在多所高校投入教学使用。它的特点是由浅入深、由易到难,将开发技巧、和开发工具结合在一起阐述,同时选取了多个商业项目APP的实战案例进行要点讲解,通俗易懂。

有需要开发工具和学习资料的可以私信小编666!

频是网页承载内容很重要的一个元素,也是必不可少的网页表现形式(图、文、表、视、音)之一。曾经网页要想播放视频、制作游戏,必须得用第三方插件flash。不仅编写代码要使用额外的语言,浏览器也必须得装第三方插件,非常不方便。随着html5标准逐渐普及,移动端、pc端开始抛弃flash,如今几乎所有的浏览器都使用html5来制作视频。

目标

  1. 了解Flash为何会被淘汰?
  2. 如何设置视频播放?
  3. 视频播放支持哪几种视频格式?

flash崛起--网页标准的耻辱

flash是Adobe公司其中之一的产品。它发起于W3C与WHATWG的第五代web标准之争,它捡了个大便宜,乘机定义网页媒体标准。

W3C与WHATWG的第五代web标准之争

flash填补了当时网页只有文字和图片的单调世界,将媒体(视频、音频、游戏)引入了网页,将网页带进多彩的世界。

Flash能够用仅仅十几K到几百K的体积,呈现出放大也不会失真的矢量彩色动图,甚至还能够做出足以令人沉迷一整天的Flash小游戏。

火柴人

Flash用第三方插件的身份,几乎制霸了网页媒体的标准,让W3C尴尬不已,甚至从某种程度上说,让真正的网页标准推广受阻。

flash衰败--HTML5崛起并全面普及

2010年4月,苹果CEO公开表示从此苹果所有产品不再支持flash。flash从此慢慢丧失移动端的市场和地位。

乔布斯支持html5

2012年,安卓宣布不再支持Flash,从此flash彻底失去了移动端市场和地位。

2012年html5标准确立,html5在逐渐制霸移动端的地位时,也直接冲击了flash仅剩的桌面市场,flash桌面市场的份额在逐步下降。

各大浏览器逐步默认禁用Flash,现2019年几乎都全部禁用。

默认禁用Flash

Adobe将在2020年停止开发和更新flash。

2020年停止开发和更新flash

flash兴起衰败皆因自己

Flash以第三方插件的身份,做着平台该做的事情,但没有推动行业标准统一化,反而企图私立标准。

随着功能的增多,能解码编码H.264,能进行3D渲染,能播放7.1声道环绕声等,功能集于一身变得臃肿,效率变得低下。

Flash非常不安全。Flash能够运行相当复杂的代码,这让Flash非常容易被渗透。加上Adobe在安全方面的不上心,这令Flash安全问题频发。

Flash很不稳定。作为一个插件,它自身频频崩溃也就罢了,还经常拉着浏览器乃至操作系统一起殉情。

Flash加剧了手机的耗电量。

html5媒体新标准--Video标签

作用是在 HTML 页面中嵌入视频元素。Video定义视频,比如电影片段或其他视频流。

视频播放

Video标签的属性

  • src 视频的播放源
  • controls 浏览器自带的控制条
  • width 视频宽度
  • height 视频高度
  • poster 视频封面
  • autoplay 自动播放
  • preload 预加载

有四个是必须的属性:src、controls、width、height属性。

视频播放代码

source标签

<video> 元素支持三种视频格式: MP4, WebM, 和 Ogg。

<source> 元素可以链接不同格式的视频文件。浏览器将使用第一个可识别的格式。

  • src 视频的播放源
  • Type 视频格式 MP4, WebM, 和 Ogg

支持多格式的视频

总结

video标签体系