一般用户都知道,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. Hadoop生态圈

    1.Hadoop是什么? 适合大数据的分布式存储与计算平台 HDFS: Hadoop Distributed File System分布式文件系统 MapReduce:并行计算框架 解决的问题: HD ...

  2. IOS_ios逆向工程-静态分析

    返回博客列表 原 ios逆向工程-静态分析 余成海 发布时间: 2014/11/03 19:17 阅读: 11201 收藏: 17 点赞: 5 评论: 6 最近在学习IOS逆向工程,查看网络上的资料也 ...

  3. Jackson学习资料

    Jackson JSON Processor Wiki Documentation for the Jackson JSON processor Jackson Tutorial by StudyTr ...

  4. info.plist、pch和四大对象(UIApplication、UIApplicationDelegate、UIWindow、UIViewController)

    本文目录 1.程序配置文件info.plist,全局头文件pch 2.应用程序对象UIApplication介绍 3.UIApplicationDelegate介绍,程序启动过程 4.UIWindow ...

  5. Daily Scrum02 12.07

    最近大家都在赶编译的大作业,没日没夜的码代码,调试,大家都很辛苦,但是,我们团队的工作,大家也不能懈怠啊! 大家要顶住压力,加油努力啊! Member 任务进度 下一步工作 吴文会 就总结点进行汇报 ...

  6. DOS 命令For精解示例

    最基本形态: 在cmd 窗口中:for %I in (command1) do command2 在批处理文件中:for %%I in (command1) do command2 在批处理中,FOR ...

  7. 机器学习常用Python扩展包

    在Ubuntu下安装Python模块通常有3种方法:1)使用apt-get:2)使用pip命令(推荐);3)easy_instal 可安装方法参考:[转]linux和windows下安装python集 ...

  8. MySQL优化性能my.cnf详解

    提供一个MySQL 5.6版本适合在1GB内存VPS上的my.cnf配置文件(点击这里下载文件): [client] port=3306 socket=/tmp/mysql.sock [mysqld] ...

  9. 数据库使用数据泵迁移遇到LOB字段

    impdp system/Clic1234 attach=SYS_IMPORT_ILEARN_TRA desc ILEARN_TRA.NOTIFI_TACTIC desc ILEARN_TRA.MSG ...

  10. Software Solutions CACHE COHERENCE AND THE MESI PROTOCOL

    COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCE NINTH EDITION Software cache cohere ...