【问题标题】：Disable fullscreen iphone video禁用全屏 iPhone 视频
【发布时间】：2013-10-31 13:08:30
【问题描述】：

现在连续几天都在为这个问题苦苦挣扎……

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

见：

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

我也尝试将视频放在画布上，但由于它看起来视频作为画布 drawImage() 方法的来源，iOS 目前不支持。

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

【问题讨论】：

你见过stackoverflow.com/questions/3699552/…

标签： iphone ios html video canvas

【解决方案1】：

在 iOS 10+ 中

Apple 终于在 iOS 10 的所有浏览器中启用了 playsinline 属性，因此这将无缝运行：

<video src="file.mp4" playsinline>

在 iOS 8 和 iOS 9 中

您可以通过略读视频而不是实际.play()'ing 来模拟播放来解决此问题。

简而言之，使用iphone-inline-video，它负责播放和音频同步（如果有），并保持<video> 正常工作。

【讨论】：

对我来说，<video src="file.mp4" playsinline> 使其内联，但仅webkit-playsinline 属性不起作用。
@KeitIG 感谢您的评论！我更新了我的答案。他们在将 iOS 10 退出测试版之前取消了该属性的前缀。
还是这样吗？
是的，iOS 10 之后的所有移动操作系统都支持playsinline 属性。
@Carlene 我想你想写playsinline 而不是playinline 也不是playinine，对吗？

【解决方案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 及更高版本。（仅在 UIWebView 中启用 with the allowedInlineMediaPlayback 属性设置为 YES。 source

恐怕无法在 Safari 中使用视频播放器

他们有一个画布视频指南，但你可能知道它在 IOS 中尚不支持：video on canvas

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

【讨论】：

这也导致了全屏播放。虽然我肯定看到了它背后的想法。
我注意到我的 Windows Phone 上的视频总是全屏播放 - 我在这件事上别无选择，可能无法通过浏览器 - 为什么需要这种行为？（可能有不同的方法）
网站中的某些元素必须在特定时间码上触发。

【解决方案3】：

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

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

【讨论】：

这可能自 2013 年以来发生了变化。我看到了更多“就地”视频播放，所以 iOS 8 现在可能支持它。

【解决方案4】：

只需添加“playsinline”：

在javascript中：

yourclassName.setAttribute('playsinline', '');

在 html 中：

<video class="Vidoo" src="https://.../video.mp4" playsinline></video>

【讨论】：