ios上uiwebview的一些实用技巧
前几个星期接到公司一个项目，要用webview在客户端上播视频，作为一个前端实习生，这种需求真是蛋疼……一不知webview是何方神圣，二不知咋调试……
下面就是蛋疼的开始：
寻找调试工具：好，非weinre莫属了，又是node的，又是npm的……且行且珍惜（虽然UC浏览器有个开发者版本，但调试麻烦，没有weinre灵活。）
项目的视频抓取自新浪和优酷
①抓来的优酷视频是个flash（下面顺便把优酷这个坑爹的也说了吧，最后想了下，还是在另外一片随笔发吧），直接嵌到(ui)webview里播放就行（已有client_id了）
②抓来的新浪视频是个mp4文件（或者说视频源链接吧），这里直接用h5标签video进行播放，这就是蛋疼的开始。
webview在安卓上问题还是不大的，除了三星，小米2等有一些小问题外，其他安卓端视频播放都没有问题。
下面要解决的就是ios的问题了！因为点击视频播放的时候，ios中uiwebview把video或者flash调用了native播放器，叫什么我不记得了，好像有两种吧，额，这不是重点。
一路上的坑：
1、遇到的第一个坑！
需求是这样的：产品说要在用户点击视频的时候，弹出一个框提示用户当前网络状态（wifi下不提示），这个用js是没法做的吧（我是做不了了）。
然后ios客户端那边给了我一个答复，我可以在网页发一个跳转链接，客户端可以捕捉到，我就直接用window.location.href做了跳转，客户端也收到了信息，也给出了网络提示。
看到这里，也许你会说，问题解决了！！我也想……
问题在这里，给出了提示后，视频同时也开始播放了啊啊，那这提示有毛用
好，这时候首先想到了一个解决方案，就是给video加一个遮罩层，是用户单击webview时，首先单击的是这个遮罩层，而不是video标签。看似这个方法是解决了问题，刚开始遮罩层是占满webview的，看不到video标签的播放按钮，但是uiwebview却完全忽视了这个遮罩层！！！为什么？我也不知道……
下面是我的解决方案：
首先，用户单击视频的时候，我用js发了一个跳转，客户端截取了这个跳转链接并给出提示，然后提示的同时视频也开始播放了，有遮罩的情况一样。猜测当webview发现在页面中有video时，默认单击调用native播放器进行播放
在video已经被遮罩的情况下，我的做法是，将video的css属性visibility设置为hidden，当用户在弹出的网络提示中选择播放，客户端再用js函数来改变这个属性值。这样算是蹩脚的解决了问题，下面是代码。
<!doctype html>
<html lang="zn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no">
<meta name="HandheldFriendly" content="true" />
<style>
html,body{
width: 100%;
height: 100%;
margin: auto;
background: black;
overflow: hidden;
}
#wrap-v {
width: 100%;
height: 100%;
visibility: hidden;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#video {
width: 100%;
height: 100%;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.shade-v {
position: relative;
width: 100%;
height: 100%;
z-index:100;
}
span{
height:70px;
width:70px;
display:block;
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
} .play-b{
background: #CACACA;
border-radius:40px;
}
.play-b:before{
content: '';
height: 0;
width: 0;
display: block;
border: 20px transparent solid;
border-right-width: 0;
border-left: 33px #747474 solid;
position: absolute;
top: 15px;
left: 24px;
}
</style>
</head>
<body>
<div id="wrap-v">
<video id="video" controls="controls">
<source type="video/mp4" src="#">
</video>
</div>
<div id="shade-v" class="shade-v">
<span class="play-b"></span>
</div>
</body>
</html>
//js代码
function playVideoApp(){ // ios客户端调用该函数
shade_v.style.display = 'none';
document.getElementById('wrap-v').style.visibility = 'visible';
video.play(); // 自动进入全屏
}
var shade_v = document.getElementById('shade-v');
shade_v.onclick = function () {
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)){ // ios设备
window.location.href = 'xxxx://playingVideo';
}
};
2、遇到的第二个坑！
坑的描述：用户看到一半不想再看了，然后点击了完成，退出了全屏播放。用户还没有离开该文章页面，这时当用户再次点击进入播放的时候，就不会自动播放了！！而且要点击播放按钮两次才会播放视频！！
这个问题实在是太蛋疼了！！先是直接问了客户端的同事能不能控制播放？不能……好吧，只能硬着头皮搜啊搜，搜啊搜，搜出来都是objectC的代码……彻底无助，不过还是找到了，最后还是让我找到了一篇日语文章，呵呵……果断点进原文，英文文档啊！上！
原来是safari开发者文档，好吧我孤陋寡闻了
//原文描述：
Full-Screen Event and Properties
OS X and iOS behave differently in terms of detecting which HTML elements can be brought full-screen. On iOS, you can take any video full-screen. On OS X, you can take any HTML element full-screen. Although they share the same webkitRequestFullscreen and webkitExitFullscreen methods, the two platforms have different event listeners: OS X: the webkitfullscreenchange event fires when an element enters or exits full-screen mode.
iOS: the webkitbeginfullscreen and webkitendfullscreen events fire when a video enters and exits full-screen mode, respectively.
Listen for these events to detect changes in screen presentation. Take a look at the HTML5VideoEventFlow sample code project to get an interactive understanding of the order in which these and other video playback events happen. The document.webkitFullscreenElement property contains the element that is in full-screen mode. Check if this property is defined to determine if the user is currently in full-screen mode. The document.fullscreenEnabled property detects whether the browser supports the full-screen API, not whether an element is currently full-screen.
英语渣就不翻译了，上面有两个事件webkitbeginfullscreen和webkitendfullscreen是关键处，这两个事件触发的时间为：webkitbeginfullscreen是在视频全屏后触发，webkitendfullscreen是在视频退出全屏后触发（也就是点击完成按钮后触发）
下面是我的解决方案：
用js绑定webkitbeginfullscreen事件，当再次用户点击视频播放时，在事件回调函数中执行video的play函数，问题解决。代码看起来像这样子：
video.addEventListener('webkitbeginfullscreen', function () {
video.play();
}, false);
3、第三个坑：
这个坑就是ios7和ios8上webview的区别，ios7叫uiwebview，ios8上改名叫webview了！！项目的app为了兼容ios7用了uiwebview来弄的，ios7和ios8下面对css样式解析也有所不同，这个问题没有把代码保留下来，因为当时也没有去刨根问底的找问题（现在估计是渲染内核的问题），直接用weinre调试好了。
4、最后一个坑：
当用户点击完成后时，也就是退出全屏，视频缩小，问题就在于当视频缩小时，停止的位置不是视频原本的位置！上图说明：
这个问题现在也没有解决，因为只有在一些手机上会，有些又很正常。如果你有解决方案，欢迎分享！！
这里就不贴全部代码了，写得也比较渣~~大神路过，文章可能写得很一般，小弟求指点。
各位有更好的方式可以实现，不妨分享下！！
ios上uiwebview的一些实用技巧的更多相关文章
- IOS 网络浅析－（十三 SDWebImage 实用技巧）
IOS 网络浅析-(十三 SDWebImage 实用技巧) 首先让我描述一下为了什么而产生的实用技巧.(在TableView.CollectionView中)当用户所处环境WiFi网速不够快(不能立即 ...
- iOS开发实用技巧—Objective-C中的各种遍历（迭代）方式
iOS开发实用技巧—Objective-C中的各种遍历(迭代)方式 说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https:// ...
- iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示
iOS开发实用技巧—在手机浏览器头部弹出app应用下载提示 本文介绍其简单使用: 第一步:在本地建立一个访问的服务端. 打开本地终端,在本地新建一个文件夹,在该文件夹中存放测试的html页面. ...
- iOS开发实用技巧—项目新特性页面的处理
iOS开发实用技巧篇—项目新特性页面的处理 说明:本文主要说明在项目开发中会涉及到的最最简单的新特性界面(实用UIScrollView展示多张图片的轮播)的处理. 代码示例: 新建一个专门的处理新特性 ...
- APP图标设计小技巧：在iOS上快速获得APP图标的真实预览图
严格来说,这并不是一篇关于前端开发的文章,因为涉及到的知识非常浅.这只是一个向设计狮们分享的小经验,只是其中用到了一些前端内容. 最近接了个私活,了解到一个初创公司正在高价悬赏Logo(主要用于APP ...
- 如何让iOS 保持界面流畅？这些技巧你知道吗
如何让iOS 保持界面流畅?这些技巧你知道吗 作者:ibireme这篇文章会非常详细的分析 iOS 界面构建中的各种性能问题以及对应的解决思路,同时给出一个开源的微博列表实现,通过实际的代码展示如 ...
- IOS 性能优化的建议和技巧
IOS 性能优化的建议和技巧 本文来自iOS Tutorial Team 的 Marcelo Fabri,他是Movile的一名 iOS 程序员.这是他的个人网站:http://www.marcelo ...
- Hbuilder实用技巧（转）
Hbuilder实用技巧 原创 2016年05月19日 10:25:42 标签: hbuilder 操作 16551 1. Q:怎么实现代码追踪? A:在编辑代码时经常会出现需要跳转到引用文件或者变量 ...
- Notepad++ 实用技巧
Notepad++是一款开源的文本编辑器,功能强大.很适合用于编辑.注释代码.它支持绝大部分主流的编程语言. 本文主要列举了本人在实际使用中遇到的一些技巧. 快捷键 自定义快捷键 首先,需要知道的是: ...
随机推荐
- 17110 Divisible（basic）
17110 Divisible 时间限制:1000MS 内存限制:65535K 题型: 编程题 语言: 无限制 Description Given n + m integers, I1,I2,. ...
- html的input输入框边框
1.输入框边框完全隐藏<input type="text" style="outline:none;border:0" /> 2.input去边框立 ...
- 20150912华为机考2之"输入一段字符串(英文)，将每个单词首字母大写后输出"
还有其他一些(隐性)要求(要不然无法通过测试): .如果首字母已经大写,则不用变 .不是英文字母的不变 e.g. Input: hello world! this is _Ljj speaking! ...
- VMware Workstation不可恢复的错误:(vmui)
虚拟机中部署项目,由于项目的日志是gbk的,就把虚拟机中linux编码改成gbk了,结果问题来了,日志显示中文正常了,但是虚拟机运行一下就出错了,注意虚拟机出错,并没导致linux也挂掉,只是linu ...
- 动手学习TCP: 环境搭建
前一段时间通过Wireshark抓包,定位了一个客户端和服务器之间数据传输的问题.最近就抽空看了看<TCP/IP详解 卷1>中关于TCP的部分,书中用了很多例子展示了TCP/IP协议中的一 ...
- MVC+AjaxFileUpload文件上传
来源:微信公众号CodeL 本次给大家分享的是ajaxfileupload文件上传插件,百度一大堆功能超炫的文件上传插件,为什么我们会选择这个插件呢? 原因是在此之前,我们尝试使用过很多基于flash ...
- NOIP2008 普及组T1 ISBN号码 解题报告-S.B.S.
题目描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如“x-xxx-xxxxx-x”,其中符号“-”就是分隔符(键盘上的减号),最后一 ...
- hihoCoder #1388 : Periodic Signal ( 2016 acm 北京网络赛 F题)
时间限制:5000ms 单点时限:5000ms 内存限制:256MB 描述 Profess X is an expert in signal processing. He has a device w ...
- hihocoder 1388 &&2016 ACM/ICPC Asia Regional Beijing Online Periodic Signal
#1388 : Periodic Signal 时间限制:5000ms 单点时限:5000ms 内存限制:256MB 描述 Profess X is an expert in signal proce ...
- UESTC 918 WHITE ALBUM --生成树变形
最小生成树变形. 题目已经说得很清楚,要求到达每个房间,只需求一个最小生成树,这时边权和一定是最小的,并且那k个房间一定与所有点都有通路,即一定都可以逃脱. 但是有可能当所有点都有了该去的安全房间以后 ...