针对在webview模式中,小米魅族手机不支持html5原生video的control的解决办法![原创]

其实,解决办法就是,重新写个control控制功能,.同样用流行的video.js可以实现

第一步就是增加个播放的图片..要不然没有按钮多难看!

<div class="videoDiv">
    <video id="video" poster=""  preload="metadata" width="100%" height="100%" autoplay="autoplay" x-webkit-airplay="allow"
           webkit-playsinline>
        <source src="http://125.88.92.166:30001/PLTV/88888956/224/3221227739/1.m3u8" type='application/x-mpegURL' />
    </video>
    <img class="playImg" src="img/play.png">
</div>

上面的视频链接是那个那个河南卫视的直播,,闲了可以自己写个video看直播

这第二步自然就是控制方法拉.其实很简单,会js的估计都会写,我抛砖引玉.....

$(document).ready(function(){
    /***********判断浏览器ua类型**********************/
    var n=navigator.userAgent.toLowerCase();
    if(/iphone|ipad|ipod/.test(n)){
        $(".playImg").remove();
    }
    /**************************视频控制*********************************************/
    function fPlayVideo(){
        $(".playImg").click(function(event) {
            var myVideo = document.getElementsByTagName('video')[0];
            if (myVideo.paused){
                myVideo.play();
                $(".playImg").css('display','none');
            }
            else{
                myVideo.pause();
            }
        });
        $("video").click(function(event){
            var myVideo = document.getElementsByTagName('video')[0];
            if (myVideo.paused){
                myVideo.play();
                $(".playImg").css('display','none');
            }
            else{
                myVideo.pause();
                $(".playImg").css('display','block');
            }
        });
        $("video").bind("ended",function(){
            $(".playImg").css('display','block');
        });
    }
    $(function(){
        fPlayVideo();
    });
});

在ios等设备上,对video的解析,即使你没有使用control属性.他也会在你视屏的中间,放一个原生的播放按钮,所以我要判断设备,把我之前加的播放按钮给移除....懂了吧....这时候,有人又要问了.,那android呢?其实android在你不加control属性的时候,上面是什么也没有的...所以android不用考虑拉...这时候,又有人问了...咳咳咳...那个你自己的图片跟ios原生的不一样,岂不是,android跟iPhone的样式看着都不一样了...

废话不多说 ..这个解决方法,着重解决了在webview模式中,一些不支持video,,,例如小米,魅族..为啥他们不支持,,,我也不知道,,要是有知道的,欢迎留言告知.

该内容为原创,引用请注明出处,,谢谢..再来一个,,么么哒~