在做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(); }); } });