解決h5的video標簽,android、ipad客戶端播放正常,iphone客戶端無法播放


在做html5時插入一個視頻播放標簽video后,測試時android、ipad客戶端播放正常,唯獨iphone自帶瀏覽器無法播放。

解決辦法:

判斷用戶所使用客戶端訪問h5頁面時是iphone時,點擊播放視頻觸發的是一個視頻url鏈接,而非video標簽。

js判斷代碼如下:此代碼引用Github中Stanko/html-canvas-video-player

var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
// Other way to detect iOS
// var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);

if (isIphone) {
    // Init CanvasVideoPlayer here
    new CanvasVideoPlayer({
        // Options
    });
}
else {
    // Use HTML5 video
}

根據以上的isIphone判斷代碼即可解決此類問題

eng:(html代碼就不再貼出)

$(function(){
        var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
        if (isIphone) {
            $(".play_video").click(function(){
                window.location="視頻的絕對地址url"
            });
        }
        else {
            $(".play_video").click(function(){
                
                var videoHtml = "<video id=\"video_span\" class=\"url_video\" src=\"視頻的絕對地址url\" x-webkit-airplay=\"true\" webkit-playsinline=\"true\" poster=\"視頻封面圖片的絕對地址\" preload=\"null\" loop=\"loop\" autoplay  controls=\"controls\"></video>"
                $("#video_div").html(videoHtml)
                $(".video").show();
                
            });
        }
    });

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM