首页 > 移动平台 > 详细

解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放

时间:2016-09-06 12:16:32      阅读:630      评论:0      收藏:0      [点我收藏+]

在做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)
                $(".section").addClass("masked");
                $(".video").show();
                
            });
        }
    });

 

解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放

原文:http://www.cnblogs.com/wenzheshen/p/5845055.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!