禁用全屏iphone视频

连续几天都在努力解决这个问题

是否有任何方法或“黑客”来禁止在iPhone上的Safari上全屏播放视频。当然，我已经尝试了“webkit playsinline”属性，但这只适用于您自己的应用程序

见：

此外，我还尝试将视频放在画布上，但由于它将视频视为canvas drawImage（）方法的源，因此iOS目前不支持该方法

有没有其他方法或替代技术我可以使用？还是我真的浪费了最后几天的时间？

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


//拦截并取消上下文菜单的请求
var myVideo=document.querySelector（'video'）；
addEventListener（“上下文菜单”，函数（e）{e.preventDefault（）；e.stopPropagation（）；}，false）；
//如果控件可见，则隐藏它们
if（myVideo.hasAttribute（“控件”））{
myVideo.removeAttribute（“控件”）
}
//播放/暂停功能
函数playPause（）{
如果（myVideo.paused）
myVideo.play（）；
其他的
myVideo.pause（）；
}
//基本上，您必须构建自己的控件ui
//位置、声音等。

其想法是：

阻止用户进入上下文菜单（显示控件）

隐藏任何可能可见的玩家控件

缺点是您必须实现自己的播放器用户界面，但这并不太复杂

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

对该主题的进一步研究发现：

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

iOS 4.0及更高版本中提供的相关标签“视频”可用性。 （仅在具有allowsInlineMediaPlayback的UIWebView中启用 属性设置为“是”。

恐怕在Safari中使用视频播放器是不可能的

他们有一个画布视频指南，但您可能知道，IOS还不支持它：

---

本文档总结了当前对IOS中移动媒体内容的限制：

我的理解是，IOS总是全屏播放视频。在苹果自己的网站上，他们使用编码的图像数据和Javascript绘图来播放视频。下面是他们如何做到这一点的分解：

在iOS 10中+ 苹果最终在iOS 10上的所有浏览器中启用了属性

playsinline

，因此这将无缝工作：

<video src="file.mp4" playsinline>

在iOS 8和iOS 9中 您可以通过模拟播放来解决此问题，方法是浏览视频而不是实际播放

.play（）

'

---

简而言之，使用，它负责播放和音频同步（如果有），它保持了

的正常工作。

这也导致了全屏播放。虽然我肯定看到了它背后的想法。我在Windows Phone上注意到视频总是全屏播放-我没有选择，可能无法通过浏览器-为什么需要这种行为？（可能有一种不同的方法）网站中的某些元素必须在特定的时间码上触发。您是否看到自2013年以来这种情况可能发生了变化。我看到了更多的“到位”视频播放，所以也许iOS 8现在支持它。对我来说，

使其内联，但是

webkit playsinline

属性本身不起作用。@KeitIG谢谢你的评论！我更新了我的答案。他们在iOS 10退出测试版之前取消了该属性的设置。仍然是这样吗？是的，iOS 10之后的所有移动操作系统都支持

playsinline

属性。我发现在iOS 12中

不起作用，但如果你给它一个值，它会起作用。例如

。但是，如果你给它一个值，它的计算结果是布尔值，那么它就不起作用，例如

<video src="file.mp4" playsinline>