Html5 Video 移动跨平台实现

前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下.

一:Html Video

参考来源: http://www.xuanfengge.com/html5-video-play.html

1.1 目的

将Html5 Video功能应用到实际项目中,针对不同的平台和环境,进行个性化处理。

基本只考虑webkit浏览器兼容问题

1.2 Html5 Video 支持格式

只支持:          .mp4后缀(.h264编码格式),和.webm后缀(专用web视频格式),以及.ogg后缀(音频文件)

注意:  Html5 Video 可以添加多个source源来进行兼容适配,这样,当第一个源读取出问题时会自动读取下一个源.  比如可以同时在前面加上.webm和.mp4源,这样一个出错时会自动读取另一个可用源(因为不同浏览器,支持的格式是不一样的)

但是,Hybird模式的Android 下,有些机型只能读取第一个source来源(测试华为和联想都是),所以也就是说在这种情况下,要确保第一个source源是正确的

各大浏览器兼容如图所示:

1.3 不同平台环境和对应实现方案

说明: 这里分为两大块,普通浏览器环境(pc和手机,主要是移动端,pc不做特别处理)和Hybird模式的APP环境(Android和iOS).

注: Html5 video可以播放本地视频或者网络视频

1.3.1 普通浏览器环境

*用Html5 Video 自带的播放栏控件

*用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.

注: 播放效果则由各大浏览器自行实现

手机端浏览器实现的不同效果,比如:

QQ浏览器(包括QQ客户端内置的浏览器):播放时会自动进入全屏

华为自带浏览器: 正常小窗口播放

1.3.2 Hybird App环境

说明: 内联播放是指直接在video标签中播放视频,没有必要进入全屏

1.3.2.1     Android内联播放

*用Html5 Video 自带的播放栏控件

*用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.

*Android内联播放需要注意,必须开启硬件加速,由于有些Android手机 webview是默认关闭硬件加速的,所以必须在创建这个带视频播放的webview时手动添加硬件加速属性才行.(详情见plus创建webview的style)

style.hardwareAccelerated = true;

1.3.2.2       iOS内联播放

*用Html5 Video 自带的播放栏控件

*用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.

*内联播放注意要点,由于iOS下默认是全屏播放的,所以需要经过设置才能正常内联播放

第一步:在项目的manifest里面配置允许webview内联播放

"plus": {        "splashscreen": {            "autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/            "waiting": true/*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/        },        "allowsInlineMediaPlayback": true,/*设置ios下允许内联播放*/        "popGesture": "close"

第二步: 创建video标签时,手动加上内联播放的属性(iOS不支持preload)

<!--                    让ios支持内联播放,必须添加 webkit-playsinline 标签                -->                <video webkit-playsinline id="videoMedia" controls="controls" preload>

这样iOS手机在播放的时候才会采用内联播放

1.3.2.3       Android非内联播放

*通过NJS使用原生播放器来播放视频,传入的url可以是本地的或网络的地址

*用 Video 视频统一处理方法处理后,点击图片之后,图片保持不变(所以没有必要隐藏图片),直接获取视频的资源地址,传给原生播放器播放

注: 这种模式下,性能要比直接html5自带播放器播放高

1.3.2.4       iOS非内联播放

*用Html5 Video 自带的播放栏控件(非内联播放需要去除特定内联属性”webkit-playsinline”,这样才能全屏播放)

if(!isInlinePlay){                    //如果是非内敛,ios需要去除内联样式                    mediaTarget.removeAttribute('webkit-playsinline');                }

*用 Video 视频统一处理方法处理后,点击图片之后,图片保持不变(所以没有必要隐藏图片),直接调用video.play()播放视频(这时候会用一个全屏播放器来播放视频)

1.3.3 注意要点

如果采用NJS通过Android原生播放器播放视频,目前无法监听到视频的一些自定义事件.(如下载中,播放完毕,暂停,播放时间等)

而如果采用Html5 Video自带播放,这些是可以通过脚本控制的.

所以选定方案时需要进行衡量

*另外,在Html5 Video播放时,无法监听到规定的结束事件seeked,只能在timeUpdate里面判断,如果ended为true就代表结束了.

*在NJS通过Android原生播放器播放时,可以通过document监听resume和pause事件判断是否进入播放和退出播放

1.4 Tips

1.4.1 关于Video视频统一处理的方案

说明: 由于将一个<Video>直接显示在页面中,会有各种五花八门的播放器效果,如图:

(这里引用了参考来源的图)

显然,体验效果并不好,所以现在的做法是用一张模拟播放的图片来替代<Video>所在的地方,而将Video元素设置为1*1像素大小.然后给图片设置点击监听,监听到点击时,播放视频.

注意:

*这里不要用{display: none}或者{width:0;height:0;}的方式，因为这样视频元素会处于未激活的状态，给后续的处理带来麻烦.

*这里没有考虑ios<6和一些低版本的Android的兼容性问题了(这些版本里,无法直接通过video.play()来播放),因为项目环境基本上要求Android>4.0  iOS 7.0以上的.

*关于点击图片播放视频后,如果是内联播放模式下(或者是普通浏览器),就应该将图片隐藏,然后将视频大小设置为本来的大小(一般为图片大小)；如果是非内联播放模式(全屏模式),就没有必要隐藏图片了,因为iOS下会自动打开一个全屏播放器来播放视频,Android下考虑到Html5 video较卡,所以也会通过NJS使用原生播放器来全屏播放视频.

1.4.2 Android NJS播放视频的实现代码

说明: 这个是Dcloud论坛中有人分享的

 //非内联模式下的plus下的android才用到                var Intent = plus.android.importClass("android.content.Intent");                var Uri = plus.android.importClass("android.net.Uri");                var main = plus.android.runtimeMainActivity();                var intent = new Intent(Intent.ACTION_VIEW);                var uri = Uri.parse(url);                intent.setDataAndType(uri, "video/*");                main.startActivity(intent);

1.4.3 如何读取元素的宽高

*在获取视频的宽度时,发现用 video.style.width无法获取到宽度.

后来查了资料,发现dom.style.width(height)只能获取在stye直接赋予的值.而如果是通过css样式表赋予的值是无法直接获取的,只能通过dom.offsetWidth(offsetHeight)获取.

*设置元素宽和高是不要直接在style里设置,而是最好通过css样式表赋予

*读取元素宽和高时,用offsetWidth(offsetHeight)

1.4.4 关于全屏播放问题

在PC端webkit浏览器下,全屏代码如下:

进入全屏: videoContainer(对应的dom).webkitRequestFullscreen();

退出全屏:document.webkitCancelFullScreen();

*但是经测试,在手机浏览器和Hybird模式下的手机环境中都无法使用,

应该是手机浏览器中video 播放器的全屏模式和pc端的有区别,已经脱离了webkit的全屏组件,而是用原生自己实现的.

1.5 遇到的问题及解决方法

1.5.1 Video.currentTime 设置值时设置无效,或者变为0

原因分析:

与测试的服务器和端口有关,测试环境是放在hbuild本地浏览器的,没有处理好视频快进问题,所以会导致每次快进后,视频都会重置-在某些测试服务器上,则出现快进无效,但不会重置

解决方法:

将网页用其它正式服务器打开均可正常,如tomcat,wampserver,甚至直接在本地打开也行.

1.5.2 无法通过代码Video.src获取资源路径

原因分析:

本实例中,Video是通过source添加src的,无法直接读取video的src

解决方法:

可以通过读取到第一个source的标签,再获取source的src

注:本来这个方法有一个缺点就是有可能第一个source的src不可用.但是由于Android中第一个source必须有用才行.否则无法正常播放.所以在确保第一个source正确的情况下能这样用.

1.5.3 部分Android机型无法退出全屏

描述:

在使用Html5 Video自带播放器播放时,部分Android机型(如联想K860点击全屏按钮进入全屏后,无法退出全屏-因为进入全屏后,全屏按钮不见了)

原因分析: 可能是手机厂商擅自劫持了浏览器或者篡改了浏览器实现方式

解决方法:

目前无法解决,在这类机型中,建议直接采用非内联模式播放或者是尽量不要手动进入全屏

1.6 示例Demo

注: 示例视频也可自己更改为自己的网络视频或者本地视频,由于视频文件太大,所以上传时就删掉了

见csdn地址：http://download.csdn.net/detail/u010979495/9458894