一般用户都知道,ios在网页点击视频播放时,视频会弹出全屏播放框。

video标签的playsinline、webkit-playsinline标记根本就不会起作用。

还有传闻说对于没有声音的视频不会全屏播放,这个好像只有对IOS10版本才会生效吧(身边没有IOS10,没有办法测试)。因此这个传闻也没有什么用处。

我见过两个库成功使ios视频在网页行内播放,一个是canvasVideo、一个是iPhoneInlineVideo。

我试图在这两个库中寻找启发,看了下他们的源码,canvasVideo没看懂,在iPhoneInlineVideo中我算是找到关键。我自己总结的是用audio标签作为驱动器,audio播放的同时修改video的currenTime

关键代码(让video标签在ios网页不会全屏播放)例子

audio.addEventListener('play', update, false);
audio.addEventListener('pause', cancelUpdate, false);
audio.play();
var animationFrame;
function cancelUpdate(){ cancelAnimationFrame(animationFrame); }
function videoUpdate(){ video.currentTime = audio.currentTime; }
function update(){ video.currentTime = audio.currentTime; animationFrame = requestAnimationFrame(update); }

这段代码中有个缺陷,就是如何让audio标签在网页中自动播放,微信浏览器是有办法可以解决自动播放的问题,但是Safari暂时我没有找到办法

iphone H5视频行内播放(禁止全屏播放)的更多相关文章

  1. andriod\iphone视频禁止全屏播放

    x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" ...

  2. IOS(苹果手机)使用video播放HLS流,实现在内部播放及全屏播放(即非全屏和全屏播放)。

    需求: 实现PC及移动端播放HLS流,并且可以自动播放,在页面内部播放及全屏播放功能. 初步:PC及安卓机使用hls.js实现hls流自动播放及全屏非全屏播放 首先使用了hls.js插件,可以实现在P ...

  3. video 在移动端播放禁止全屏

    <video src="" preload controls x5-playsinline="" playsinline="" web ...

  4. uwp,c#,全屏播放保持屏幕响应

    在开发视频app的时候,全屏播放一段时间内没有电脑操作,电脑会自动进入睡眠模式,这时就要多写些代码来保持响应了. (这里使用的是MediaElement播放控件,MediaElement需要手动添加代 ...

  5. iOS APP 中H5视频默认全屏播放问题解决

    问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...

  6. iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法(任意页面横竖屏或禁止)

    iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法 时间 2015-07-14 20:59:00  博客园-原创精华区 原文  http://www.cnblogs.com/fe ...

  7. h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式

    在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...

  8. 微信非全屏播放设置(仅Iphone)

    由于微信X5内核强制视频全屏,用X5自带内核播放,一般内嵌视频打开播放就会被全屏. ihpone里面可以通过设置 x-webkit-airplay="true" webkit-pl ...

  9. video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件

    video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...

随机推荐

  1. .NET Framework中Object基类有哪些方法?

    ToString(),虚方法,任何子类可重写自定义 GetType(),非虚,返回类型名 Equals(),虚方法,默认情况下判定两个引用是否指向同一实例.(ReferenceEquals()功能相同 ...

  2. XMLHttpRequest对象用法

    xmlhttprequest is what? 用户后台与服务器交换数据. 可以在不重新加载页面的情况下更新网页: 在页面已加载后从服务器请求数据: 在页面已加载后从服务器接收数据: 在后台向服务器发 ...

  3. ArcMap 10.3 AddIN找不到插件

    现象:VS 2012写的AddIn插件,编译通过,安装成功 ArcGIS 10.3的AddIN Manager中,可以看到该插件 可是在自定义中却找不到.检索不到该插件. 解决方法:.net Fram ...

  4. 如何使用sysdba身份通过jdbc连接oracle?

    Class.forName("oracle.jdbc.driver.OracleDriver").newInstance(); Properties conProps = new ...

  5. Android课程---关于GridView网格视图的学习

    activity_ui6.xml <?xml version="1.0" encoding="utf-8"?> <GridView xmlns ...

  6. SVM实践

    在Ubuntu上使用libsvm(附上官网链接以及安装方法)进行SVM的实践: 1.代码演示:(来自一段文本分类的代码) # encoding=utf8 __author__ = 'wang' # s ...

  7. ASP.NET State Server 服务 sessionState

    在发布ASP.NET网站的时候,出现state server错误:Server Error in '/' Application.----------------------------------- ...

  8. Get请求中文乱码的几种解决方式

    1.将字符串转码:new String("xxxxx".getBytes("iso-8859-1"),"utf-8")         这种 ...

  9. JMeter之JMS接口测试

    JMeter是Apache开发的一款小巧易用的开源性能测试工具,由java语言开发.JMeter不仅免费开源而且功能强大.易于扩展,如果有一定Java开发基础的话还可以在JMeter上做扩展开发新的插 ...

  10. IDEA +maven+ ContextLoaderListener not find

    tomcat 启动失败:SEVERE: Context [] startup failed due to previous errors 查看pox.xml 有spring-web依赖 查看tomca ...