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++是一款开源的文本编辑器,功能强大.很适合用于编辑.注释代码.它支持绝大部分主流的编程语言. 本文主要列举了本人在实际使用中遇到的一些技巧. 快捷键 自定义快捷键 首先,需要知道的是: ...
随机推荐
- Neo4j图数据库管理系统开发笔记之二：管理系统Server端界面一览
最近在neo4j java api和rmi的基础上,设计了一套neo4j管理工具,分为server端和client端,中间用rmi进行通信.基本功能包括图数据库基本信息维护管理(创建.编辑.删除.统计 ...
- 烂泥：kvm安装windows系统蓝屏
本文由秀依林枫提供友情赞助,首发于烂泥行天下. 最近一直在学习有关KVM的知识,实验一直是在虚拟机VM中进行的.今天刚好公司有一台空闲的服务器,直接拿来安装centos.kvm等等,然后相关的配置. ...
- Aptana studio 3前端开发编辑器推荐
直接进入主题,先上图 这就是我Apatana studio 3的默认界面,推荐此工具的原因主要有以下几点: 1.可以集成Emmet,快速编写HTML+CSS,做到效率倍增. 2.Jquery 自动完成 ...
- Python Tomcat Script(多实例)
之前书写过 Tomcat 单实例的 Python 脚本,本次增加 Tomcat 多实例的操作脚本. 1:准备 安装所需 Python 插件 A方法: pip install argparse B方法: ...
- runv kill 流程分析
1.runv/kill.go Action: func(context *cli.Context) 该函数做的工作很简单,就是通过grpc客户端,发送一个grpc请求而已,如下: c.Signal(n ...
- 【软件】图文解释XCode常用快捷键的使用
一.关于运行调试 1.运行,停止,都在工具栏的Product里. Command + R 运行. Command + . 停止 2.F6单步调试.F7跳入,F8继续, 和Eclipse,VS类似 ...
- 二分+动态规划 POJ 1973 Software Company
Software Company Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 1112 Accepted: 482 D ...
- 利用OpenCV检测图像中的长方形画布或纸张并提取图像内容
基于知乎上的一个答案.问题如下: 也就是在一张照片里,已知有个长方形的物体,但是经过了透视投影,已经不再是规则的长方形,那么如何提取这个图形里的内容呢?这是个很常见的场景,比如在博物馆里看到一幅很喜欢 ...
- Treap（树堆）：随机平衡二叉树实现
本文是根据郭家宝的文章<Treap的原理及实现>写的. #include<stdio.h> #include<string.h> #include<stdli ...
- java 12-4 StringBuffer类的替换、反转、截取功能
1.StringBuffer的替换功能: public StringBuffer replace(int start,int end,String str):从start开始到end用str替换 pu ...