zoukankan      html  css  js  c++  java
  • 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暂时我没有找到办法

  • 相关阅读:
    Mybatis学习记录
    北京信息科技大学第十一届程序设计竞赛E-- kotori和素因子(深搜)
    eclipse快捷键记录
    牛客小白月赛15A 斑羚飞渡
    台州学院第十二届校赛记录(B,C,E,H,I,J,L)
    3.13 模拟赛
    bzoj 4827 礼物
    bzoj 3252 攻略
    bzoj 5457 城市
    bzoj 3681 Arietta
  • 原文地址:https://www.cnblogs.com/Silababy/p/6118132.html
Copyright © 2011-2022 走看看