針對在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,,,例如小米,魅族..為啥他們不支持,,,我也不知道,,要是有知道的,歡迎留言告知.

 

 

 

該內容為原創,引用請注明出處,,謝謝..再來一個,,么么噠~