一般用户都知道,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. postcss-px2rem

    1.安装 npm install gulp-postcss --save-dev 2.gulp var gulp = require('gulp'); var postcss = require('g ...

  2. 配置ssl访问(https)

    转载自http://www.blogjava.net/stevenjohn/archive/2012/09/26/388600.html 简要记录主要步骤备忘 1.进入到jdk下的bin目录 2.输入 ...

  3. 如何用最简单的方法将PCweb改成适合各种设备的web

    使web页面自适应设备大小 1)用一个<div>包围<body>的内容 2)该div属性的宽度设为100%   (宽度设为100%后,页面会随着设备窗口大小自动改变) 3)高度 ...

  4. BSBuDeJie_01

    一. 基本配置 1 项目图标 将图片直接拖入Assets-AppIcon 2 启动图片     3 软件名称   4 删除Main.stroryboard   5 设置窗口的根控制器 - (BOOL) ...

  5. Codeforces Round #384 (Div. 2) ABCD

    一场比较简单的div2 电脑出了点问题 所以在比赛中理论ac了ACD 除了爆int这种事情之外.. A 一个人想从a到b 移动的花费这么定义 如果初始点和到达点类型相同 就不花钱 反之花距离差的绝对值 ...

  6. fenye

    <div class="ptb20 navpages"> <span class=" ">共有<span class=" ...

  7. Bootstrap响应式栅格系统的设计原理

    1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...

  8. 关于Apache/Tomcat/JBOSS/Neginx/lighttpd/Jetty等一些常见服务器的区别比较和理解

    先说Apache和Tomcat的区别: Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. ...

  9. python计算apache总内存

    #!/usr/bin/env python import os from subprocess import Popen, PIPE def getPid(): p=Popen(['pidof','h ...

  10. Apache2 worker

    http://www.php-internals.com/book/?p=chapt08/08-03-zend-thread-safe-in-php 在多线程系统中,进程保留着资源所有权的属性,而多个 ...