博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
iphone H5视频行内播放(禁止全屏播放)
阅读量:4623 次
发布时间:2019-06-09

本文共 847 字,大约阅读时间需要 2 分钟。

一般用户都知道,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暂时我没有找到办法

转载于:https://www.cnblogs.com/Silababy/p/6118132.html

你可能感兴趣的文章
hdu 1754 I Hate It 线段树 点改动
查看>>
Latex - test
查看>>
[LeetCode] Pour Water 倒水
查看>>
103. Binary Tree Zigzag Level Order Traversal
查看>>
249. Group Shifted Strings
查看>>
学习Python第二天
查看>>
form表单 post 请求打开新页面
查看>>
java.lang.IllegalArgumentException异常 配置文件的问题
查看>>
Heibernate主键生成策略
查看>>
简言MVC
查看>>
jQuery Mobile学习日记
查看>>
黑马程序员-结构
查看>>
水仙花数(详细2
查看>>
do{}while(0)与CC_BREAK_IF的绝妙搭配
查看>>
如何培养独挡一面的能力
查看>>
学习AOP--异常日志和操作日志的记录
查看>>
【入门】心系南方灾区
查看>>
【入门】求1!+2!+...+N!
查看>>
day-19 多种优化模型下的简单神经网络tensorflow示例
查看>>
索引的重要性
查看>>