一般用户都知道,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. java文件下载,上传,解压方法

    1.文件下载(亲测可用) private static final int BUFFER = 2 * 1024;// 缓冲区大小(2k)private boolean isSuccess = true ...

  2. 利用OTP为odoo增强安全访问

    两次验证是广泛应用于各大站点的验证机制,我们今天利用Google Authentication来实现Odoo的两次验证,防止撞库或密码泄露等引起的安全问题. 1. 二次验证的原理 参见 http:// ...

  3. 大数据技术Hadoop入门理论系列之一----hadoop生态圈介绍

    Technorati 标记: hadoop,生态圈,ecosystem,yarn,spark,入门 1. hadoop 生态概况 Hadoop是一个由Apache基金会所开发的分布式系统基础架构. 用 ...

  4. PHP基础知识之数组

    数组的定义: array( key => value , ... ) // 键(key)可以是一个整数或字符串,键可以省略,默认从0开始索引 // 值(value)可以是任意类型的值或者简写的方 ...

  5. Hibernate主键生成策略(转)

    1.自动增长identity 适用于MySQL.DB2.MS SQL  Server,采用数据库生成的主键,用于为long.short.int类型生成唯一标识 使用SQL Server 和 MySQL ...

  6. 【iCore3 双核心板】例程三十六:DAC实验——输出直流电压

    实验指导书及代码包下载: http://pan.baidu.com/s/1bRVnzS iCore3 购买链接: https://item.taobao.com/item.htm?id=5242294 ...

  7. jQuery File Upload 单页面多实例的实现

    jQuery File Upload 的 GitHub 地址:https://github.com/blueimp/jQuery-File-Upload 插件描述:jQuery File Upload ...

  8. 简单快速部署samba服务器

    samba是一种在linux环境运行的免费软件,可以为局域网内的不同计算机系统之间提供文件以及打印机等资源的共享服务. samba服务安装和配置: 1.安装gcc编译器以及samba服务和samba依 ...

  9. WebApp中的页面生命周期及路由管理

    最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...

  10. 关于CAShapeLayer的一些实用案例和技巧【转】

    本文授权转载,作者:@景铭巴巴 一.使用CAShapeLayer实现复杂的View的遮罩效果 1.1.案例演示 最近在整理一个聊天的项目的时候,发送图片的时候,会有一个三角的指向效果,指向这张图片的发 ...