Pages: 1/2
主题 : 控制webview使用html5的video播放视频不全屏(inline)的方法
级别: 风云使者
UID: 83747
发帖: 3865
可可豆: 19534 CB
威望: 19405 点
在线时间: 2395(时)
发自: Web Page
来源于&&分类
控制webview使用html5的video播放视频不全屏(inline)的方法&&&
webview中用html5的video方式播放视频时，在ipad上是默认原来大小的，而在iphone上是默认全屏播放的。论坛中搜索，都没给出答案，google－》stackoverflow，找到最终解决方法：HTML里video必须加上webkit-playsinline属性&video id=&player& width=&480& height=&320& webkit-playsinline&Obj-C里，webview设置allowsInlineMediaPlayback属性为YESwebview.allowsInlineMediaPlayback = YES;原文链接：
级别: 骑士
可可豆: 1117 CB
威望: 1117 点
在线时间: 94(时)
发自: Web Page
感谢分享,正好用到呢.
级别: 圣骑士
可可豆: 7672 CB
威望: 7660 点
在线时间: 362(时)
发自: Web Page
感谢分享，之前在iPad上做过，没试过iPhone的，还不知道有这个问题，学习学习。
级别: 骑士
UID: 19580
可可豆: 1394 CB
威望: 1375 点
在线时间: 942(时)
发自: Web Page
正在了解这方面的问题 纪录一下
时间宝贵，不要浪费
级别: 精灵王
发帖: 1517
可可豆: 5147 CB
威望: 5418 点
在线时间: 1079(时)
发自: Web Page
级别: 侠客
可可豆: 340 CB
威望: 210 点
在线时间: 629(时)
发自: Web Page
试了，没用！
级别: 新手上路
可可豆: 70 CB
威望: 70 点
在线时间: 298(时)
发自: Web Page
标志下。防止后期用到。
走你！！！！！！！！
级别: 新手上路
可可豆: 17 CB
威望: 16 点
在线时间: 54(时)
发自: Web Page
我也试了一下，没有用。有什么其他方法可以切实实现吗？
级别: 侠客
UID: 324260
可可豆: 265 CB
威望: 265 点
在线时间: 668(时)
发自: Web Page
mark。。。。。
级别: 新手上路
可可豆: 1 CB
威望: 1 点
在线时间: 0(时)
发自: Web Page
这个好像在safari没有效果，在一些APP内置的浏览就可以，比如QQ,微信这些内置的似乎就有效果
Pages: 1/2
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版移动端html5 video标签 事件不触发-CSDN论坛-真格学网-IT技术综合网站
移动端html5 video标签 事件不触发-CSDN论坛
来源：互联网 &责任编辑:小易 &时间: 12:55:05
移动端html页面变形怎么办答：不知道是怎么变形这个加在head中也不行吗HTML5来写移动端APP的优缺有哪些答：优缺点如下：1在用户体验和表现上，原生APP胜出。在这个方面，HTML5仍然面临着不同移动终端设备本地浏览器的功能接入问题，同时在提供用户展示图形界面和数据展现的丰富性方面还有不足。2在跨平台开发成本上，HTML5胜出。HTML5采用网络通用语...如何用html5构建移动端的webapp答：H5edu教育html5开发为您解答：移动web在当今的发展速度是一日千里，作为移动领域的门外汉，在这段时间的接触后，发现前端开发这一块做一个小小的总结。1.四大浏览器内核1.Trident(IE浏览器):因为在早期IE占有大量的市场份额，所以以前有很...移动端html5video标签事件不触发-CSDN论坛(图1)移动端html5video标签事件不触发-CSDN论坛(图2)移动端html5video标签事件不触发-CSDN论坛(图3)移动端html5video标签事件不触发-CSDN论坛(图4)移动端html5video标签事件不触发-CSDN论坛(图5)移动端html5video标签事件不触发-CSDN论坛(图6)本网有用户碰到这样的问题：移动端html5 video标签 事件不触发-CSDN论坛，具体问题如下：
本帖最后由 chenyunfu999 于
13:18:12 编辑HT380W是什么手持终端答：HT380W是捷宝科技最新自主研发、设计、生产的高配置、高性能WinCE手持终端，采用MicrosoftWinCE6.0操作系统，CPU主频达1GHz，处理能力强劲，运行防抓取，真格学网提供内容。本网根据需求用户需求，为用户寻得以下其他网友提供的解决方法，方法仅供参考，具体如下：企业网盘有哪些是能够支持移动端（Android和IOS）...问：天禾云盘是能够支持安卓平台和IOS平台吗？我在官网没有看到有苹果的，是...答：方法/步骤形态对比：企业网盘，是通过特定的系统软件搭载防抓取，真格学网提供内容。解决方案1：移动智能终端有哪些?答：HT368A,捷宝HT380a，HT518H等防抓取，真格学网提供内容。
&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
如何解决移动端浏览器工具栏阻挡页面内容的问题问：移动端浏览器中，点击页面时，会自动出现浏览器工具栏，阻挡页脚（我的...答：首先你确定你那块是不是在body里面写着。然后就是给body一个底部导航的p防抓取，真格学网提供内容。解决方案2：手机上方经常出现4ght是什么意思,问：手机上方经常出现4ght是什么意思,答：TD-LTE是移动4G网络制式，这个是中国独有的，出了国门就没人用了。FDD-LTE是WCDMA的升级为4G的网络制式，防抓取，真格学网提供内容。
引用&1&楼&xmt&的回复:HTforWeb框架使用费用多少?问：我是个小白希望得到大大的解答是开源的吗？我给的奖励会很高悬赏最高...答：不是开源的，我们公司就付费了防抓取，真格学网提供内容。&!DOCTYPE&html&PUBLIC&"-//W3C//DTD&XHTML&1.0&Transitional//EN"&"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&
HTML5平面设计师该从哪些方面进行自我提升?其实也多少受到互联网的影响,感知风向起步较早的一批甚至已经蜕变到了移动端的设计...字体设计图形插画设计、色彩心理学、web端还涉及到htmlcss代码等防抓取，真格学网提供内容。
改变后没有用。
HTMLhead头标签详细介绍这就造成了很多差异性。移动互联网时代,head头部结构,移动端的meta元素,显得更为...&●最新HTML5推出更加简洁的书写,它向前向后兼容,推荐使用。XM防抓取，真格学网提供内容。解决方案3：javascriptHTML5canvas实现打砖块游戏本文实例编写的一个小游戏,基于HTML5中的canvas。游戏主要是小球反弹击打小方块...}height_span+=25;width_spa防抓取，真格学网提供内容。
&!DOCTYPE&html&&
&html&&25岁男孩学点什么有用的技术在手好WEB标准化布局(X)HTML/HTML5语言HTML语法与常用标签的详解,包括布局标签,表...端软件界面设计北京市交管局违章处罚系统界面设计实训。第四阶段MUI(防抓取，真格学网提供内容。
&body&&设计师在创业团队中该扮演什么角色?不过任何事都不能过激,改造还得逐步完成。这段时间内,我制订了公司的整套VI,逐步应...从零开始熟悉了移动端自不必说,还学会了响应式设计与开发、html5动画影片、A防抓取，真格学网提供内容。
&video&id="video1"&controls="controls"&我目前在北京,想要学习UI设计,请问哪家培训机构的课程比较全...项目实训:展示类型企业站3.前端开发制作+响应式WEB开发:HTML简介及文档结构C...相应式布局原理、Bootstrap模板。项目防抓取，真格学网提供内容。
&&&source&src="/example/html5/mov_bbb.mp4"&type="video/mp4"&求轩辕剑3云和山的彼端的攻略?端》攻略http://www.kahome.net/youxi/diannaoyouximiji//25707.html公元七...他们有使这座岛移动的能力,不过赛特得先接受他们的两个考验。5.第一个考验是到城堡...防抓取，真格学网提供内容。
&&&source&src="/example/html5/mov_bbb.ogg"&type="video/ogg"&vss怎么使用了,详细一点了!而在以前的版本中,它们只能通过命令行来实现。移动文件-当用户移动文件时,VSS6.0...Explorer中该新功能创建一个打开某个特定VSS数据库的桌面快捷键。HTML格式的帮...防抓取，真格学网提供内容。
&&Your&browser&does&not&support&HTML5&video.防抓取，真格学网提供内容。
&/video&提起燕窝，相信很多女性都吃过，特别是在怀孕期间，更是很多人的滋补首选燕窝是中国自明代以来开始被食用的传统名贵食品之一。只要不要破坏它的营养怎么炖都有营养的因为燕窝丰富的唾液酸是人体唯一能够从食物中大量防抓取，真格学网提供内容。
&script&如果老师跟我说孩子在幼儿园踢人了，我首先会跟老师说声抱歉，再问下被踢的孩子现在怎么样，需不需要我们家长做什么，同时表示自己回家后一定会好好跟孩子沟通，避免以后再发生这样的事情。然后第一时间安慰自己的孩防抓取，真格学网提供内容。
myVid=document.getElementById("video1");观致不降价的原因我觉得有二。其一：观致是奇瑞想打造一个全新的中高端品牌，费了九牛二虎之力，好不容易组建好团队经过研发投入量产新品等一系列过程，就是为了突破自主中高端品牌的天花板，这一次如果把价格放下来防抓取，真格学网提供内容。
myVid.onloadedmetadata=alert("Meta&data&for&video&loaded");百度网盘可以下载到很多资源，都是开源的，不要钱。很多经典的电影都可以找到下载。然后，如果不局限于软件的话，你可以去逛逛网站:926影视。很多电视剧上面都有更新，当然它也是提供链接，然后得用网盘下载。安防抓取，真格学网提供内容。
&/script&&对于很多购买汽车的消费者来说，安全是头等大事，除了车辆的外形和价格之外，谁都不想购买一辆好看便宜但是不安全的汽车。对于价格几乎相同的几款车，重视安全的消费者应该选择更安全的车型。就拿汉腾X7、长安CX防抓取，真格学网提供内容。
&/body&&君子兰怎样施肥？一：施底肥也称作基肥。底肥的主要作用是为植株的发育创造条件，满足自身对养分需要。君子兰的底肥在在换盆时施用，每2年一次。常用的基肥有：动物粪便、绿肥、堆肥、豆饼肥等。方法：在种植前将底防抓取，真格学网提供内容。
&/html&哪里慢了，你是用联通吗？我还真找朋友一起做过对比：我的手机是小米，联通卡，不管是在3g还是4g网络下，都比移动电信的快，朋友的手机有苹果的，华为，小米，oppo。也不管是在农村还是市区，都是我的快，信防抓取，真格学网提供内容。
如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端答：第一步，电脑端下载ifunbox.这是一款PC端管理iOS设备的小软件，有简体中文版很方便很好用.第二步，把iPhone连接上电脑.第三步，找到iPhone点击图中的“用户应用程序”.第四步，通过这个文件路径找到文件下载路径用户应用程序-UC浏览器-Library-C...HT380W是什么手持终端答：HT380W是捷宝科技最新自主研发、设计、生产的高配置、高性能WinCE手持终端，采用MicrosoftWinCE6.0操作系统，CPU主频达1GHz，处理能力强劲，运行速度快。产品采用3.5英寸IPS液晶电阻触控屏，操作流畅、显示清晰。数据采集方式齐全，集合了RFI...
本文相关：输入关键字或相关内容进行搜索
简单的VIDEO代码，在安卓4.4以上和IOS下正常，安卓4.4以下就如图，控制条左右都有白色按钮，测试超过5台机器，代码在其他浏览器中一切正常&video id=&media& width=&100%& controls=&controls&&
&source src=&http://***.net/uc/video/getMp4?vid=90d87625bfcd01f738caca82aabd27e2_9& /&
我也是这样的
我这里三星的机子就这样。其他的正常
我找到原因了，是mui的css中
.mui-btn,button,input[type=button],input[type=reset],input[type=submit]
和播放器冲突导致的。改一下video 标签的 input[type=button] CSS就行了。
video,input[type=button] {padding:0;border:0px solid # }
要回复问题请先或
浏览: 1253
关注: 5 人前端在线资源
本文地址：
此文写于7年前，前端发展已经翻了好几番，本文内容可能过时，不一定有效，仅供参考。
一、前面的唠叨
我记得就是前几个月吧，有条消息说YouTube支持了HTML5视频嵌入标签video，好吧，我听说而已，因为我不是个擅长翻墙的人，到底如何我也不得而知。
与主题不相关的HTML5方面的东西我就不多说了，对于video标签，获取大家都听说了，这个标签的功能如同现在HTML语言中的img标签，就现在，比如要链接并显示一张图片，可以这样子：
&img src="mm1.jpg" />
结果就可以显示下面这张美女图片（张含韵小妹妹）：
所以，在HTML5的时代里，基本上只要一个&video>标签加一个视频的src链接地址就可以播放视频了，对于开发人员来讲真是“酷毕了”（《神话》中经典台词）。
然而，当现实照进遐想，我们不得不去正视，现在，支持HTML5 video标签的浏览器寥寥无几。我知道chrome2以及Safari是支持的，看下面这张截自chrome 2的图：
使用的代码如下：
&video width="352" height="264" controls autobuffer>
&source src="../media/cat.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>&/source>
对于Opera浏览器，您可以参阅这篇上周才发表的文章“”
对于IE浏览器，那还不知道要等到猴年马月才等到支持HTML5 video标签的时候。然而，广大劳动人民的智慧是无穷无尽的，广大开发人员的智慧也会无穷无尽的。国外领先的web开拓者们通过js，已经实现了可以让各个主流浏览器支持video标签的方法。
二、主流浏览器支持video标签
方法很简单，只要调用一段js，就可以让主流浏览器实现video标签的视频播放。
此项目已经放到Google code上，您可以点击查看。
使用方法：
要想让主流浏览器都支持HTML5标签，使用非常简单，只要链接一个js文件就可以了。所以，只要您的页面上（头部或底部）有这么段代码：
src="/svn/trunk/src/html5media.min.js"
就可以了。
对于HTML部分，使用类似下面：
&video src="video.mp4" width="320" height="240" controls autobuffer>&/video>
是不是很简单啊！
为了演示效果，我就直接把此js以及video标签签到这篇文章里，您将会在下面看到这段10秒钟的关于猫咪的视频，您可以切换IE或是Firefox或是chrome或是Safari观看（界面有差别的哦~~）。
由于下面2个资源大大拖慢了网页的加载速度，因此，今日起博客文章不直接呈现效果，大家可以点击下面的demo链接体验。
&script src="/svn/trunk/src/html5media.min.js"&&/script&
&video src="/study/media/cat.mp4" width="352" height="264" controls autobuffer&&/video&
当加载完毕，点击播放按钮，就可以看到视频播放了。
或者您也可以狠狠地点击这里：
三、一些说明
此js文件，您可以点击下面两处下载（右键 – [目标|链接]另存为）：
2. 本站下载，但流量烧不起，已关闭
实现的原理大致是使用了flash技术，使用flash播放器嵌入视频的方式，使得IE及Firefox支持video标签。这个播放器称为flowplayer，具体我也不是很了解。
关于视频格式
目前，这种多浏览器支持方法所支持的视频格式有限，为mp4和ogv格式，否则视频可能不会播放。
可能遇到的问题
您可能会遇到这样的问题：我明明链接的是mp4格式的文件啊，为什么在IE及Firefox下有问题。如果您遇到的问题是在这两个浏览器下视频不播放，或是播放时只有声音而没有图像，而在chrome浏览器或是Safari下良好，则您可能要仔细您mp4文件的编码格式了。
对于编码，我不在行，好像是视频要存储为h.264文件，不要问我是什么东西，我也不知道，这可能还要靠您自己解决了。
最后，百无聊赖，先上一张Safari浏览器下的截图，原因是，Safari下的播放器真是卡哇伊。
本文为原创文章，转载请注明来自[]
本文地址：
（本篇完）
相关文章 (0.403) (0.386) (0.229) (0.158) (0.140) (0.140) (0.129) (0.088) (0.077) (0.077) (RANDOM - 0.012)
标签： , , , , , ,
赞助商推荐()：
想学到点真东西？
如果你有1~3年前端开发经验，不妨
热门总排行}