解决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();
            });
        }
    });
解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放的更多相关文章
- h5的video标签
		在video标签中,我们可以使用属性:videoWidth & videoHeight,它获取的是video的宽度和高度(媒体本身). 虽然不能直接使用,但是可以通过计算宽高比得到 video ... 
- IPhone微信H5用Video标签播放不了视频
		H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#) 
- 解决html5中video标签无法播放mp4问题的办法
		这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ... 
- 更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签
		kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的em ... 
- h5的video标签支持的视频格式
		关于<video>标签所支持的视频格式和编码: MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vo ... 
- 浏览器支持播放的视频播放格式要求(H5的video标签)
		今天给一个客户上传视频后发现,即使是MP4格式的视频浏览器也打不开,找了好久的问题,最红发现客户视频的编码方式不是h5支持的,折腾了好久,最终确认了浏览器对于MP4编码方式的如下: 浏览器对mp4的编 ... 
- 微信H5的video标签解决方案
		https://github.com/cczw2010/weixin-video 偶尔发现了可以h5化的一种更适合的方式,一个有趣的属性 h5-page 已经更新 
- H5的video标签在网页上播放MP4视频时只有声音没有画面
		最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ... 
- 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉
		使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ... 
随机推荐
- JBOSS内存参数详解
			JAVA_OPTS="$JAVA_OPTS -server -Xms1024m -Xmx1024m -Xss512k -XX:PermSize=128m -XX:MaxPermSize=25 ... 
- Introduction ch3
			[1] Don’t reinvent the wheel; use libraries.[2] Don’t believe in magic; understand what your librari ... 
- .PRT extension and multiple NX versions
			http://nxway.blogspot.ca/2007/10/prt-extension-and-multiple-nx-versions.html To open prt files with ... 
- webdriver 获取alert  提示no alert is  active
			http://hi.baidu.com/janice515/item/bce536bb136e8441bb0e120f 摘上面: 一般正常情况下会报错,如 no alert is active 目 ... 
- iOS 标题内容待定
			UITableView: UITableViewCell的声明文件.所包含的: UIView控件(contentView,作为其它元素的父控件) -- 容器 两个UILabel控件( textLabe ... 
- Sprint评分表
			组名:第七班 姓名:王炳午 1.Cs 小分队: 项目: 游戏与办公的集合一些小的程序的整合有2048,倒计时,记 ... 
- 初识selenium--百度实例录制
			Selenium 是一个web的自动化测试工具,不少学习功能自动化的朋友首选的就是Selenium,它相比QTP有许多优点(QTP笔者由于种种原因暂未使用过O(∩_∩)O哈!): ①Selenium是 ... 
- [ASE][Daily Scrum]12.12
			好久没有写daliy scrum了…… 目前看,我们的无限地图,AI以及计分都差不多成型了,不过还有很多bug在调整当中 今天要做的是 Zhao 调通分数&聊天服务器 Yiming Shili ... 
- Redis 系列 (一) StackExchange.Redis的使用
			一.DLL安装 用NuGet搜索StackExchange.Redis,然后下载就可以. ConnectionMultiplexer对象是StackExchange.Redis最中枢的对象.这个类的实 ... 
- 【WPF】如何把一个枚举属性绑定到多个RadioButton
			一.说明 很多时候,我们要把一个枚举的属性的绑定到一组RadioButton上.大家都知道是使用IValueConverter来做,但到底怎么做才好? 而且多个RadioButton的Checked和 ... 
