移动端视频播放

时间 2019-11-16

标签移动端视播放栏目无线繁體版

原文原文链接

HTML5 <video> 的出现，为浏览器中的视频播放带来了很大的进步，PC 端上表现很好，看看 Youtube 的 H5 播放器就知道了，但在移动端却有各类各样的限制，本篇便是实战以后的小结，主要讲讲那些和 PC 端不一样的地方，若是其中有错误的地方，欢迎指正。html

自动播放

苹果出于流量损耗的考虑，禁止了那些非用户输入触发的播放动做，这意味着给 video 标签增长 preload 及 autoplay 属性都是无效的，而且也没法使用 JS 的 play() 和 load()方法来播放和加载视频，除非是用户手动触发。前端

audio 音频播放一样适用上面的规则。html5

如下是官方说明：web

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()"event does not.浏览器

举个栗子，这样能够播放（有用户输入）：网络

<video id="myMovie"></video>
<input type="button" value="Play" onclick="document.myMovie.play()">

这样则不行（没有用户输入）：app

<body onload="document.myMovie.play()">

其实若是苹果只是出于流量上的考虑，彻底能够换种思路，在非 WI-FI 网络下这种考虑是合理的，但在 WI-FI 网络下应该放开 preload 和 autoplay 的功能。less

不过从产品设计上来讲，自动播放并非一个好的体验，不到万不得已应尽可能避免使用。ide

安卓基本上面临着和 IOS 同样的问题，限于测试机数量，只测了少部分机型，而在海量的安卓机型之中，不排除有些厂商会经过修改底层规则来支持视频自动播放。测试

全屏问题

IOS 上播放即会自动全屏，因此不存在此问题，而且全屏以后自带前进、后退、播放/暂停、时间进度等功能，彻底不用操心。

安卓机型支持不一，测试过程用到的华为 G7-TL00、联想 K3 Note、三星 Note 二、小米 3 不支持（诡异的是红米 Note 却支持，大概是 MIUI 版本不一致，规则有变化）

解决办法，能够针对安卓和 IOS 作不一样策略，安卓环境下，点击播放时跳到单独页面播放视频，这也是咱们目前用的解决方案。

crash 问题

在应用的 H5 容器环境中，在 HTML 代码中直接放置 video 或 audio 标签可能会有必定机率致使应用 crash，解决方案是动态建立 video 或 audio 来改善或避免此问题。

以上问题和所使用的浏览器有关系，若是是在 app 的 webview 窗口中，则和 app 使用的浏览器内核有关，通常来讲，上面所列只针对使用默认浏览器内核。

H5 播放器组件

若是在移动端开发中要用到视频播放，不建议使用原生方式来写，除非是如下两种状况：

很是了解各类游戏规则和兼容差别
项目只须要支持 IOS

除此以外，建议使用专门的播放器组件，组件通常封装了不少的兼容差别性，不必去重复造轮子，把时间花在业务逻辑实现上便可。

这里推荐两款：

PrismPlayer

这是淘宝某前端团队作的一个组件，能够很方便地定制播放器的功能，有专人维护，推荐使用。

Video.js

优秀的开源播放器组件，历史“悠久”，Star 过万，配置丰富，各类细节作得很到位。

以上两款组件都支持 flash 和 video 方案，移动端使用 video 方式，因为不用加载插件，速度会比 flash 提升很多。

其余

<video> 支持 MP4, WebM, Ogg 三种视频格式，其中 MP4 格式支持最好，视频建议使用 H.264 编码，若是想要更好的兼容性，能够把这 3 种格式视频都制做好，用如下方式引用：

<video>
 <source src="http://example.com/xxx.mp4" type='video/mp4' />
 <source src="http://example.com/xxx.webm" type='video/webm' />
 <source src="http://example.com/xxx.ogv" type='video/ogg' />
<video>

关于视频格式，阮一峰老师早些年还翻译过一篇文章 HTML5的视频格式之争，很是有意思，对了解这其中的渊源也颇有帮助。

视频大小理论上没有限制，但考虑到移动端特色，视频大小与时长应尽可能压缩。