移动端HTML5视频播放优化实践

同iOS

canplaythrough

会有明确的缓冲，表示可以流畅播放了；

没有什么用，视频仍然会卡住，数据可能还没有开始加载；

playing

明确表示播放开始了；

依然没有用，视频可能并没有开始播放；

progress

有明确的下载，可以获取到当前的buffer，并且全部下载完毕后不在触发；

不一定有明确的数据下载，并且全部下载完毕后依然继续触发；

timeupdate

会有明确的进度变化，可以获取到currentTime；

进度不一定变化，currentTime可能总是0，但是第一次有currentTime变化的timeupdate事件一定代表了视频开始播放了；

error

iOS中会有明确的错误抛出；

Android中某些浏览器会莫名其妙的抛出error；

stalled

网络状况不佳，导致视频下载中断；

在没有play之前，也可能会抛出该事件。

属性差异attributesiOSandroid

******************

***********************************************

***********************************************

poster

封面图片

支持，但是加载速度明显比在<img>中要慢；

不一定支持（浏览器厂商的实现标准不统一）；

preload

预加载

iPhone不支持；

可能支持；

autoplay

自动播放

advanced rar repair(arar) 是一个强大的修复损坏的 rar 压缩文档的工具.它使用高级技术扫描被损坏的 rar 压缩文档,并尽最大可能恢复你的文件,使你能够最大程度的减少文件破坏后所带来的损失.当前 arar 支持恢复所有版本的 rar 和自解压文档,它与 windows 资源管理器整合,支持拖放操作和命令行参数,使你能更方便、快速的修复文件.主要功能-支持所有 rar 和自解压文档版本的修复-支持恢复多卷和固实压缩的压缩文档-支持修复已破坏媒介中的 rar 和自解压文档,比如软盘、zip 磁盘、cdrom 等-支持批量 rar 和自解压文档的修复-支持 16777216 tb (例如 17179869184 gb) 的大的 rar 文档修复-支持与 windows 资源管理器整合,使你可以很方便地通过资源管理器上下文菜单修复 rar 压缩文档-支持拖放操作.支持命令行参数.。am， 局域网内架设服务器，方便管理用户与查询信息am, 文字通讯，文件（夹）离线传输，集成office新易发，消息跟踪，消息签收，文档管理，群聊，网络硬盘等即时通讯软件功能am, 支持语音会议，同步ppt播放，远程控制，短信工具，网络传真平台等多媒体功能am, 支持客户端人员搜索，最近联系人，我的好友组群建立am，支持支持跨网段，并且同步支持内外网互联服务器端权限设置，策略等二次开发包免费开放提供am ，支持多服务器互联及开发定制的需求am，支持企业网络硬盘及文档管理方案。客户端视频频道框架本地视频播放器jar版，提供了视频功能支持，此模块只提供框架，支持内置应用模块的支持，允许开发者自定义开发功能模块，除了视频之外官方提供部分内置功能模块，比如协同浏览，投票，白板，讨论，部分功能可能需要付费，此框架对外接口由appframework调度管理，对内开放接口api，以提供内置应用接入。

可能支持；

loop

循环播放

支持

可能支持；

controls

控制条

支持，但是需要开始播放了才显示

基本都支持显示或者不显示

width和height

一定给出明确的属性设置，切不能为0；

如果不设置，仅仅通过CSS样式去控制视频大小，可能会导致标签失效。

其他怪异bug和不友好表现iOSandroid

*********************************************************

*********************************************************

物理位置覆盖在<video>区域上的元素，click和touch等事件会失效，比如一个<a>链接如果覆盖在<video>上，那么点击后没有任何效果。

iOS8.0+中，单页面播放视频超过16个，再播放的视频全部MediaError解码异常无法播放。

iPhone的Safari会弹出一个全屏的播放器来播放视频，iPad则支持内联播放。iOS7+ 如果webview（比如微信）开启了webview.allowsInlineMediaPlayback = YES;，可以通过设置webkit-playsinline属性支持内联播放；

支持内联播放，但某些厂商会用自己的播放器劫持原生的视频播放；

下载视频时，会先发送一个2字节的请求来获取视频元数据（比如时长），然后再不断的发送分包续传（206）请求来下载视频，抓包显示请求数和请求量至少有一倍的冗余（x2），这个严重的bug在iOS8中有明显的修复，但是分包的206请求仍然会有冗余数据的下载，浪费了流量。

比iOS的处理方式好，没有第一个2字节请求，没有流量损耗；

1.页面的错位：页面的错位应该是网站的一个很普遍的问题了，具体的原因就是网站在布局和页面设计的时候不科学，或是页面的内容相互挤压导致错位。当然有时候也是因为您正在浏览的页面发生了异常导致页面崩溃，这种情况请不要担心，3.0版本的新架构下，一个子进程的崩溃不会导致整个浏览器的崩溃，大大增强了程序的稳定性，您只需要将崩溃的页面关闭即可。fixed是相对定位，而这个“相对”是相对浏览器窗口的定位，假设层离浏览器窗口顶部10像素时，无论怎么拖动滚动条，这个层都会在离浏览器窗口顶部10像素的位置出现，即会一直显示在浏览器窗口中。

某些浏览器厂商会劫持<video>，用其“自己”的播放器来播放视频，“破坏”了产品本身的播放体验，那么只能case by case的解决了。

加载视频时没有进度提示，视觉上看不出是播放完了还是卡住了；

加载视频时，大都会显示一个自带的loading UI（菊花）。

最佳实践视频初始化

如果将一个<video>直接显示在页面中，那么就会看到各种五花八门的播放器初始效果；

这显然不是一个好的视觉体验，那么通常的做法是制作一个模拟的视频播放视图，比如一个封面加一个播放按钮。

而真实的<video>视频元素要隐藏起来，如何隐藏呢？最好不要用{display: none}或者{width:0;height:0;}的方式，因为这样视频元素会处于未激活的状态，给后续的处理带来麻烦。最佳的方式是将视频设置成1×1像素大小，放在视觉边缘的位置。

autoplay的支持依赖内核和网络状况，比如iPhone在蜂窝网络下明确禁用了autoplay；

经过试验，在没有明确的用户操作的情况下，直接通过video.play()也是无法激活播放的；

并且在产品设计上，自动播放也不是一个舒服的用户体验，所以产品设计上尽量避免使用自动播放。

之前提到，视频最好通过1px大小隐藏起来，那么这时如何触发播放呢？

经过试验，当在明确的用户操作（touch、click）时本地视频播放器jar版，通过这些用户行为事件的回调函数，用video.play()是可以触发视频播放的，那么能否在用户操作后，再去同步的创建和播放视频呢？答案是肯定的，这无疑是一个视频元素初始化的最佳实践，但是有些差异需要注意。

可以在用户的touch时间中动态创建并播放视频。

可以在用户的touch时间中动态创建视频，但不能播放；要再追加一个click事件来启动播放；也就是说，给伪造的视频播放按钮同时绑定tap和click事件，在tap的时候创建，在之后300毫秒的click中去播放。

大部分高版本Android可以像iOS6+那样去处理，但是低版本的不行，必须要通过click事件去传递video.play()，为了保持兼容，最好是用帮tap和click两个事件来分别完成视频的初始化和播放。

点击穿透的意思，就是如果一个绝对定位或者固定定位元素处于页面最顶层，对这个元素绑定一个点击事件，那么你点击这个点对应的下面凡是有点击事件或者a标签都会被触发执行。1.记录观看的视频名称，点击播放该视频。使用方法： 安装好app后，打开视频网站，点击到播放视频详情页稍等一会会提示点击嗅探播放，这时点击播放即可咯。

7、独有可选循环模式：单曲循环，全部循环，目录播放，目录循环，随机播放，浏览播放。□七种播放模式可切换(正常播放、单曲重复、全部重复、随机播放、目录循环、目录播放、浏览播放)。播放模式 七种播放模式可切换(正常播放、单曲重复、全部重复、随机播放、目录循环、目录播放、浏览播放)。

即使，在不支持循环播放的Android中，通过seeked事件知道了播放进度到了终点或起点暂停了，此时也无法通过video.play()来让视频重新播放。

如何获取视频时长和已经下载的时长？

callback，日历开始加载的时候，isloading参数为true触发一次，日历加载完毕，isloading参数为false触发一次，用法：。dom2级呢有一个加载完成事件domcontentload比较好用,这个事件是会在html文档结构加载完毕触发。5，web触发方式，这也有区别，一种是定时触发，一种是定周期触发，dz和phpwind都是定时触发，我最后采用的是定周期触发。

假设播放短视频，如果网络不佳，会造成播放断断续续，在iOS中这种停顿还没有一个明确的等待提示，这不是一个好的体验，那么是否可以将视频全部下载完毕再播放呢？

在iOS中，可以在视频刚开始下载的时候马上暂停，此时下载还将继续，可以做一个loading的菊花告知视频正在加载，然后等到视频全部下载完再开始播放。

// 暂停，但下载还在继续

// 启动定时器检测视频下载进度

// 下载完了，开始播放吧

缓冲播放——边下边播时，选择开始播放的最佳时间点

当视频越来越长或者网络慢时，等待视频全部下载完再播放也不是好的体验，最好能边下边播，缓冲到流畅状态就开始播放，那什么时候播放才是最佳时间点呢？

要点四：新媒体行业新媒体传播的内容通常为音频、视频、高清图片等大数据量的多媒体信息,该等信息的加载速度和播放流畅程度直接影响其受众的用户体验,而信息的加载速度和播放流畅程度主要是由传播渠道的信息传输速度决定。首先是常见编码的4k视频的播放测试，所有视频都能够流畅播放，快进快退零缓冲，没有出现卡死，掉帧的现象。随着客户端的支持，诸如腾讯视频、搜狐视频、优酷客户端都已经可以实现airplay播放功能，流畅度和清晰度都有较大的提升，点击播放后缓冲几秒钟即可流畅播放。

canplaythrough event: The user agent estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.

注意：下载完再播放和缓冲播放只适用于iOS。

统计播放时间和播放次数

要统计实际的播放时间，要累加timeupdate事件变化的时间，再减去中间可能暂停的时间。

// 开始播放是打点

// 暂停播放时清除打点

// 累加播放时间

// 播放时间

// 播放次数

异常处理

对error事件做详细的上报；

对stalled事件做统计上报，并提示用户网络慢等。

参考数据

微视触屏版iOS视频测速

网络环境视频码率获取到视频时长

时间点(s)开始流畅播放

时间点(s)全部下载完毕

时间点(s)视频长度(s)

wifi

1000kbps

2.86

3.97

5.85

8.69

非wifi

500kbps

4.56

10.62

8.67

参考资料

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/bofangqi/article-108116-1.html