zoukankan      html  css  js  c++  java
  • DCloud-Video:Html5 Video 实现方案

    ylbtech-DCloud-Video:Html5 Video 实现方案
    1.返回顶部
    1.1、
    1.2、

    一、 Html5 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

    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>直接显示在页面中,会有各种五花八门的播放器效果,如图:
    (这里引用了参考来源的图)
    见图2


    显然,体验效果并不好,所以现在的做法是用一张模拟播放的图片来替代<Video>所在的地方,而将Video元素设置为1*1像素大小.然后给图片设置点击监听,监听到点击时,播放视频.
    注意: 
    *这里不要用{display: none}或者{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
    注: 示例视频也可自己更改为自己的网络视频或者本地视频,由于视频文件太大,所以上传时就删掉了

    见源码附件

    2、
    2.返回顶部
     
    3.返回顶部
     
    4.返回顶部
     
    5.返回顶部
     
     
    6.返回顶部
     
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    Top 10 Product Manager Skills To Boost Your Resume In 2021
    大数据知识梳理
    B端产品如何设计权限系统?
    华三盒式交换机MAC、ARP、Route性能表项参数查询
    中了传说中的挖矿病毒
    SqlServer 2019 事务日志传送
    docker中生成的pdf中文是方框的解决方案
    The Live Editor is unable to run in the current system configuration
    2021 面试题大纲
    五分钟搞定Docker安装ElasticSearch
  • 原文地址:https://www.cnblogs.com/storebook/p/8776654.html
Copyright © 2011-2022 走看看