Html5 Video 实现方案

来源：http://ask.dcloud.net.cn/article/569

源码下载

前言: 最近项目中须要用到html5 视频播放功能,因而稍微研究了解了下,遇到了不少坑,特此记录下.

1、 Html5 Video
参考来源: http://www.xuanfengge.com/html5-video-play.html
(这篇博文确实帮助很大)

1.一、 目的
将Html5 Video功能应用到实际项目中,针对不一样的平台和环境,进行个性化处理。
基本只考虑webkit浏览器兼容问题

1.二、 Html5 Video支持格式
只支持: .mp4后缀(.h264编码格式),和.webm后缀(专用web视频格式),以及.ogg后缀(音频文件)
注意: Html5 Video 能够添加多个source源来进行兼容适配,这样,当第一个源读取出问题时会自动读取下一个源. 好比能够同时在前面加上.webm和.mp4源,这样一个出错时会自动读取另外一个可用源(由于不一样浏览器,支持的格式是不同的)
可是,Hybird模式的 Android 下,有些机型只能读取第一个source来源(测试华为和联想都是),因此也就是说在这种状况下,要确保第一个source源是正确的
各大浏览器兼容如图所示:
见图1

1.三、 不一样平台环境和对应实现方案
说明: 这里分为两大块,普通浏览器环境(pc和手机,主要是移动端,pc不作特别处理)和Hybird模式的APP环境(Android和iOS).
注: Html5 video能够播放本地视频或者网络视频
1.3.一、 普通浏览器环境
*用Html5 Video 自带的播放栏控件
*用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
注: 播放效果则由各大浏览器自行实现

手机端浏览器实现的不一样效果,好比: 
QQ浏览器(包括QQ客户端内置的浏览器):播放时会自动进入全屏
华为自带浏览器: 正常小窗口播放

1.3.二、 Hybird App环境
说明: 内联播放是指直接在video标签中播放视频,没有必要进入全屏

1.3.2.一、 Android内联播放
*用Html5 Video 自带的播放栏控件
*用 Video 视频统一处理方法处理后,点击图片手动隐藏图片,设置视频大小,手动播放视频.
*Android内联播放须要注意,必须开启硬件加速,因为有些Android手机 webview是默认关闭硬件加速的,因此必须在建立这个带视频播放的webview时手动添加 硬件加速属性才行.(详情见plus建立webview的style)

style.hardwareAccelerated = true;

1.3.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.三、 Android非内联播放
*经过NJS使用原生播放器来播放视频,传入的url能够是本地的或网络的地址
*用 Video 视频统一处理方法处理后,点击图片以后,图片保持不变(因此没有必要隐藏图片),直接获取视频的资源地址,传给原生播放器播放
注: 这种模式下,性能要比直接html5自带播放器播放高

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

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

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

1.3.三、 注意要点
若是采用NJS经过Android原生播放器播放视频,目前没法监听到视频的一些自定义事件.(以下载中,播放完毕,暂停,播放时间等)
而若是采用Html5 Video自带播放,这些是能够经过脚本控制的.
因此选定方案时须要进行衡量
*另外,在Html5 Video播放时,没法监听到规定的结束事件seeked,只能在timeUpdate里面判断,若是ended为true就表明结束了.
*在NJS经过Android原生播放器播放时,能够经过document监听resume和pause事件判断是否进入播放和退出播放

1.四、 Tips

1.4.一、 关于Video 视频统一处理的方案
说明: 因为将一个<Video>直接显示在页面中,会有各类五花八门的播放器效果,如图:
(这里引用了参考来源的图)
见图2

显然,体验效果并很差,因此如今的作法是用一张模拟播放的图片来替代<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.二、 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.三、 如何读取元素的宽高
*在获取视频的宽度时,发现用 video.style.width没法获取到宽度.
后来查了资料,发现dom.style.width(height)只能获取在stye直接赋予的值.而若是是经过css样式表赋予的值是没法直接获取的,只能经过dom.offsetWidth(offsetHeight)获取.
*设置元素宽和高是不要直接在style里设置,而是最好经过css样式表赋予
*读取元素宽和高时,用offsetWidth(offsetHeight)

1.4.四、 关于全屏播放的问题
在PC端webkit浏览器下,全屏代码以下:
进入全屏: videoContainer(对应的dom).webkitRequestFullscreen();
退出全屏: document.webkitCancelFullScreen();
*可是经测试,在手机浏览器和Hybird模式下的手机环境中都没法使用,
应该是手机浏览器中video 播放器的全屏模式和pc端的有区别,已经脱离了webkit的全屏组件,而是用原生本身实现的.

1.五、 遇到问题及解决方法

1.5.一、 Video.currentTime 设置值时设置无效,或者变为0
缘由分析: 
与测试的服务器和端口有关,测试环境是放在hbuild本地浏览器的,没有处理好视频快进问题,因此会致使每次快进后,视频都会重置-在某些测试服务器上,则出现快进无效,但不会重置
解决方法:
将网页用其它正式服务器打开都可正常,如tomcat,wampserver,甚至直接在本地打开也行.

1.5.二、 没法经过代码Video.src获取资源路径
缘由分析: 
本实例中,Video是经过source添加src的,没法直接读取video的src
解决方法:
能够经过读取到第一个source的标签,再获取source的src
注:原本这个方法有一个缺点就是有可能第一个source的src不可用.可是因为Android中第一个source必须有用才行.不然没法正常播放.因此在确保第一个source正确的状况下能这样用.

1.5.三、 部分Android机型没法退出全屏描述:在使用Html5 Video自带播放器播放时,部分Android机型(如联想K860点击全屏按钮进入全屏后,没法退出全屏-由于进入全屏后,全屏按钮不见了)缘由分析: 多是手机厂商擅自劫持了浏览器或者篡改了浏览器实现方式解决方法:目前没法解决,在这类机型中,建议直接采用非内联模式播放或者是尽可能不要手动进入全屏