禁用全屏iPhone视频

Question

现在连续几天在这个问题上苦苦挣扎......

是否有任何方法或"黑客"禁用iPhone上的Safari全屏播放视频.当然我已经尝试了'webkit-playsinline'属性,但这只适用于你自己的应用程序.

看到:

<video class="" poster="" webkit-playsinline>
    <source src="" type="video/ogg" preload="auto">
    <source src="" type="video/mp4" preload="auto">                
</video>

此外,我试图将视频放在画布上,但由于它看起来像是画布的源,因此目前iOS上不支持drawImage()方法.

我可以使用其他任何方式或替代技术吗？或者我最近几天真的浪费时间了吗？

Answer 1

在iOS 10+中

Apple终于playsinline在iOS 10上的所有浏览器中启用了该属性,因此这将无缝地工作:

<video src="file.mp4" playsinline>

在iOS 8和iOS 9中

您可以通过浏览视频来模拟播放而不是实际播放来解决此问题.play().

简而言之,使用iphone-inline-video,它负责播放和音频同步(如果有的话),并保持<video>工作正常.

Answer 2

    <div id="video-player">
        <video src="http://movies.apple.com/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.m4v"></video>
        <p><a href="javascript:playPause();">Play/Pause</a></p>
   </div>

   <script type="text/javascript">
        // intercept and cancel requests for the context menu
        var myVideo = document.querySelector('video');
        myVideo.addEventListener("contextmenu", function (e) { e.preventDefault(); e.stopPropagation(); }, false);

        // hide the controls if they're visible
        if (myVideo.hasAttribute("controls")) {
            myVideo.removeAttribute("controls")   
        }

        // play/pause functionality
        function playPause() {
            if (myVideo.paused)
                myVideo.play();
            else
                myVideo.pause();
         }

         // essentially you'll have to build your own controls ui
         // for position, audio, etc.

    </script>

这个想法是:

1. 阻止用户进入上下文菜单(显示控件)
2. 隐藏可能可见的任何播放器控件

缺点是你必须实现自己的播放器UI - 但它并不太复杂

*此代码仅用于向您展示如何解决问题,而不是用于实时应用程序

对该主题的更多研究发现:

webkit-playsinline表示视频元素应该在线播放而不是全屏播放.

相关标签"视频"可用性适用于iOS 4.0及更高版本.(仅在UIWebView中启用,allowInlineMediaPlayback属性设置为YES. 源

我担心在Safari中使用视频播放器是不可能的

他们有一个关于画布视频的指南,但你可能知道它还没有在IOS中支持:画布上的视频

本文档总结了当前IOS中移动媒体内容的限制:移动视频状态