一般用户都知道,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. MYSQL的常用命令和增删改查语句和数据类型【转】

    连接命令:<a href="http://lib.csdn.net/base/mysql" class='replace_word' title="MySQL知识库 ...

  2. HDU2653 BFS+优先队列

    Waiting ten thousand years for Love Time Limit: 10000/2000 MS (Java/Others)    Memory Limit: 32768/3 ...

  3. mysql数据库日期,ip等处理

    一.日期 1.select now(); 查询当前时间,格式为:年-月-日 时:分:秒,如2015-12-17 17:37:20 2.select unix_timestamp(); 将字符串类型的日 ...

  4. php编译内容

    ./configure --prefix=/usrc/share/php--with-apxs2=/usr/share/apache2/bin/apxs--with-config-file-path= ...

  5. 从网页上抓取Windows补丁信息然后整型输出(Python)

    Powershell实现:http://www.cnblogs.com/IvanChen/p/4488246.html 今天通过Python实现: # coding=utf-8 import re i ...

  6. 学术作为一种志业 马克斯·韦伯Max Weber。

    注:原内容来自优酷自频带:梁文道 一千零一夜 学术作为一种志业马克斯·韦伯Max Weber. 韦伯是社会学的三大创始人之一.另外两个,一个是法国的涂尔干,还有一个就是我们中国人都知道的马克思.在其& ...

  7. Chrome F12学习

    Chrome实用调试技巧 Chrome调试工具常用功能整理 Google Chrome开发者工具使用(图文教程) 如何更专业的使用Chrome开发者工具

  8. Implicit and Explicit Multithreading MULTITHREADING AND CHIP MULTIPROCESSORS

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION The concept of thread ...

  9. LeakCanary 内存检测 工具 --超级傻瓜 不会DDMS的福音

    大神资料贴出 ,学习  ,集成到项目中 . LeakCanary 中文使用说明     http://www.liaohuqiu.net/cn/posts/leak-canary/ logcat 显示 ...

  10. 如何利用python监控主机存活并邮件、短信通知

    功能: 1.使用定时任务执行脚本,检查主机存活信息2.将主机存活信息写入指定文件3.发现宕机的主机后给用户发邮件提醒备注:因为139邮箱在接受到邮件后会自动给用户发送条短信告知(且此服务免费),所以间 ...