在iOS 10 +

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终于在iOS 10上的所有浏览器中启用了属性playsinline，因此这将无缝运行：

<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>

这个想法是：

阻止用户进入上下文菜单（以显示控件）
隐藏任何可见的播放器控件

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

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

关于这个问题的更多研究发现：

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

相关标签“视频”可用性适用于iOS 4.0及更高版本。   （仅在带有allowsInlineMediaPlayback的UIWebView 中启用   属性设置为YES。   source

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

他们有“画布上的视频”指南，但您可能知道IOS尚不支持它：video on canvas

本文档总结了目前IOS中移动媒体内容的限制：mobile video status

Answer 3

我的理解是iOS总是播放视频全屏。在Apple自己的网站上，他们使用编码图像数据和Javascript绘图来进行视频播放。以下是他们如何做到的细分：

https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI

禁用全屏iPhone视频

3 个答案:

在iOS 10 +

在iOS 8和iOS 9中