在做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客户端无法播放的更多相关文章

  1. h5的video标签

    在video标签中,我们可以使用属性:videoWidth & videoHeight,它获取的是video的宽度和高度(媒体本身). 虽然不能直接使用,但是可以通过计算宽高比得到 video ...

  2. IPhone微信H5用Video标签播放不了视频

    H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#)

  3. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

  4. 更改kindeditor编辑器,改用支持h5的video标签替换原有embed标签

    kindeditor是一款不错的可视化编辑器,不过最近几年似乎没在更新,现在h5趋于主流,正好有个业务需要编辑器支持mp4视频的播放,考虑到现在h5中的video标签的强大,于是决定将原来系统中的em ...

  5. h5的video标签支持的视频格式

    关于<video>标签所支持的视频格式和编码: MP4 = MPEG 4文件使用 H264 视频编解码器和AAC音频编解码器 WebM = WebM 文件使用 VP8 视频编解码器和 Vo ...

  6. 浏览器支持播放的视频播放格式要求(H5的video标签)

    今天给一个客户上传视频后发现,即使是MP4格式的视频浏览器也打不开,找了好久的问题,最红发现客户视频的编码方式不是h5支持的,折腾了好久,最终确认了浏览器对于MP4编码方式的如下: 浏览器对mp4的编 ...

  7. 微信H5的video标签解决方案

    https://github.com/cczw2010/weixin-video 偶尔发现了可以h5化的一种更适合的方式,一个有趣的属性 h5-page 已经更新

  8. H5的video标签在网页上播放MP4视频时只有声音没有画面

    最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...

  9. 用HTML5 video标签插入视频,在谷歌浏览器上播放视频时,右下角显示的下载按钮怎么去掉

    使用H5的video标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...

随机推荐

  1. Oracle学习笔记1

    查看登录用户 show user; 启用scott用户 alter user scott account unlock; 操作表空间 select * from dba_tablespaces; se ...

  2. link2001错误无法解析外部符号metaObject

    http://blog.sina.com.cn/s/blog_791f544a0100r01b.html     1>MainWindowBottomWidget.obj : error LNK ...

  3. Python学习之路—Day1

    第1章 Python语言简介 1.1 Python是什么 Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn)是什么呢?简单的说,它是一种计算机编程语言及一组配套的软件工具和库. ...

  4. VIM使用(二) 浏览内核源代码

    为了实现类似SourceInsight功能,通过VIM+Ctags+Cscope+Taglist+Source Explore +NERD Tree实现. 一, 安装插件 1)安装Ctags 和Csc ...

  5. Python成长笔记 - 基础篇 (十一)----RabbitMQ、Redis 、线程queue

    本节内容: 1.RabbitMQ 消息队列 2.Redis 3.Mysql   PY 中的线程queue(threading Queue):用于多个线程之间进行数据交换,不能在进程间进行通信 进程qu ...

  6. [原] XAF How can I change XafDisplayNameAttribute dynamically

    void ViewControlsCreated(object sender, EventArgs e) { foreach (StringPropertyEditor item in view.Ge ...

  7. maven环境终于可以了

    说说maven可以后小小的体会吧,虽然还没有用maven运行过工程,体会是pom.xml中的dependency属性可以帮助管理项目中的jar包,只要在这里配置下需要的jar包,保存后就会自动从中央仓 ...

  8. 对文本行按特定字段排序(前N个字符或后N个字符),TCPL 练习5-17

    The C programming language 的关于文本行排序的问题有很多种要求的方式,在对每行的字段排序方面,最简单的是例如对前N个字符或者末位N个字符进行排序,更高一点的要求是,对特殊符号 ...

  9. Atom.io设置ctrl+delete

    一般常见的text editor,在文本前面的空白处按下ctrl+delete,只是删除空白符到单词前面停下,但是Atom.io的默认设置,把空白符后遇到的第一个单词也删掉了.改配置方法是在keyma ...

  10. Icident event 分析

    现象 备库中断,显示如下错误 Connect_Retry: 60 Master_Log_File: mysql-bin.000185 Read_Master_Log_Pos: 308647804 Re ...