iphone H5视频行内播放(禁止全屏播放)
一般用户都知道,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视频行内播放(禁止全屏播放)的更多相关文章
- andriod\iphone视频禁止全屏播放
x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" ...
- IOS(苹果手机)使用video播放HLS流,实现在内部播放及全屏播放(即非全屏和全屏播放)。
需求: 实现PC及移动端播放HLS流,并且可以自动播放,在页面内部播放及全屏播放功能. 初步:PC及安卓机使用hls.js实现hls流自动播放及全屏非全屏播放 首先使用了hls.js插件,可以实现在P ...
- video 在移动端播放禁止全屏
<video src="" preload controls x5-playsinline="" playsinline="" web ...
- uwp,c#,全屏播放保持屏幕响应
在开发视频app的时候,全屏播放一段时间内没有电脑操作,电脑会自动进入睡眠模式,这时就要多写些代码来保持响应了. (这里使用的是MediaElement播放控件,MediaElement需要手动添加代 ...
- iOS APP 中H5视频默认全屏播放问题解决
问题描述:在Android中,视频可以正常在H5页面局部播放,iOS中则自动切换至全屏模式. 查看资料得以解决,20190301记录下来. 解决方法:IOS10及以后,在 video标签页中只包含 w ...
- iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法(任意页面横竖屏或禁止)
iOS 全局禁止横屏,但UIWebView 全屏播放视频,横屏,解决办法 时间 2015-07-14 20:59:00 博客园-原创精华区 原文 http://www.cnblogs.com/fe ...
- h5页面自动播放视频、音频_关于媒体文件自动全屏播放的实现方式
在移动端(ios和android)播放视频的时候,我们即使定义了autoplay属性,仍然不能自动播放.这是由于手机浏览器为了防止浪费用户的网络流量,在默认情况下是不允许媒体文件自动播放的,除非用户自 ...
- 微信非全屏播放设置(仅Iphone)
由于微信X5内核强制视频全屏,用X5自带内核播放,一般内嵌视频打开播放就会被全屏. ihpone里面可以通过设置 x-webkit-airplay="true" webkit-pl ...
- video视频标签一些设置,包括封面、播放结束后的封面、视频占满屏幕的方式、视频播放暂停、展示控制栏、触发全屏播放事件
video视频标签一些设置,包括封面.播放结束后的封面.视频占满屏幕的方式.视频链接.视频播放暂停.展示控制栏.触发全屏播放事件 <video id="video" auto ...
随机推荐
- win7 64 安装mysql-python:_mysql.c(42) : fatal error C1083: Cannot open include file: 'config-win.h': No such file or directory
今天想在在win7 64位环境下使用python 操作mysql 在安装MySQL-python 时报错: _mysql.c _mysql.c(42) : fatal error C1083: Can ...
- 【Alpha】Daily Scrum Meeting第六次
一.本次Daily Scrum Meeting主要内容 各队员的任务完成情况 接下去要做的任务有哪些方面的问题 二.项目进展 学号尾数 今日已完成任务 接下去要做 502 统一Excel表头数据的英文 ...
- Bash On Win10 (WSL) 安装 Odoo 开发环境
前段时间微软发布了Bash On Win10,虽然目前还是Beta阶段,但是一想到再也不用折腾虚拟机上跑odoo了,就忍不住手痒,尝试在WSL上安装了一下odoo,结果比较惊喜,感觉可以抛弃Vitru ...
- HTML 5 拖放(Drag 和drop)
浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5. 1.把标签 draggable 属性设置为 true. 2.向标签添加on ...
- QT的程序开机自启动方法
/home/fa/.config/lxsession/LXDE/autostart文件最后添加脚本
- Unity学习疑问记录之界面适配
Unity3d UGUI 界面适配 实例解析 三种适配方式 http://www.mamicode.com/info-detail-475563.html
- 在 Linux 下搭建 Git 服务器
环境: 服务器 CentOS6.6 + git(version 1.7.1)客户端 Windows10 + git(version 2.8.4.windows.1) ① 安装 Git Linux 做为 ...
- WebApp中的页面生命周期及路由管理
最近切换到一个新项目,使用的技术栈是Require+Backbone,鉴于对鞋厂webapp框架的了解,发现这个新项目有些缺陷,主要是单纯依赖Backbone造成的,也就是Backbone的好和坏都在 ...
- GET,POST — 简述
本文主要对GET与POST基本区别进行汇总并掌握,如有错误与遗漏之处,请指出. 文章出处:http://www.cnblogs.com/useryangtao/ 1. HTTP HTTP(即超文本传输 ...
- 神奇的 CURL 命令
CURL? 嗯,说来话长了~~~~ 这东西现在已经是苹果机上内置的命令行工具之一了,可见其魅力之一斑 1) 二话不说,先从这里开始吧! curl http: //www.yahoo.com 回车之 ...