解决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标签可以直接插入视频,一般在浏览器效果如下图显示: 但有时在谷歌浏览器上显示,会遇到右下角有下载按钮.如果项目要求去掉这个下载按钮,怎么办呢?如下图显示: 分析: 经本人测试,是谷 ...
随机推荐
- AKI
KDIGO 2012定义:尿量<0.5ml/kg/h 6h+:scr上升50%+ 7d-:scr上升26.5 2d- 但面对录入窗口,又想不出说什么了,继续看aki?刚才想的是什么呢?入冬,好像 ...
- Mini projects #4 ---- Pong
课程全名:An Introduction to Interactive Programming in Python,来自 Rice University 授课教授:Joe Warren, Scott ...
- HTML5中id可以用数字开头,但在css中不能正常使用
昨晚在看<响应式Web设计:html5和css3实战>时,书中提到“HTML5中的ID指可以用数字开头”.这个还真不知道,于是测试了一下,发现了问题. 在H5描述中是这样说的: 在css样 ...
- MongoDB初步(一)
1.软件下载:mongodb-win32-x86_64-2008plus-ssl-3.4.1-signed.msi 2.下载补丁:hotfix kb2731284
- 2.使用JDK开发webService
使用jdk开发webService需要注意:jdk版本必须1.6以及1.6以上! 以下webService的组成部分: server端和client端,通过服务器端(server)webService ...
- html5实战2
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- Web Essentials之Bundling
返回Web Essentials功能目录 本篇目录 介绍 样例文件 已知行为 介绍 这篇要讲的是Bundling,我看很多人把它翻译为捆绑,如果你喜欢你也可以这么理解,我是不太习惯,我还是喜欢它为bu ...
- 一次与51aspx客服MM谈话 -- 坑是怎么发展的
GG从发布以来,我每次版本更新都会同步到51aspx源码网站,这次在同步更新GG V3.2版本到51aspx时,出了点小状况: 上传3.2版本几个小时后,我再次上去查看,发现其状态变成了“退回”,于是 ...
- mongodb(分片)
分片(即sharding)是将数据拆分至不同数据节点的方式. 1.在mongoDB中提供了自动分片的方式,它会根据数据块(chunk)大小的设定,对片键进行拆分: 2.mongoDB配置分片,要配置三 ...
- Linux文件系统应用---系统数据备份和迁移(用户角度)
1 前言 首先承诺:对于从Windows系统迁移过来的用户,困扰大家的 “Linux系统下是否可以把系统文件和用户文件分开到C盘和D盘中” 的问题也可以得到完满解决. 之前的文章对Linux的文 ...