检测客户端是否允许HTML5视频内联播放

Question

有没有一种好的方法可以检测客户端浏览器是否允许HTML5视频的内联播放？

更新

我不只是想检测视频支持情况。

我想要检测的是视频是否只能全屏播放还是也可以内联播放。因为在iPhone Safari上，iOS视频只能全屏播放，但在iPad上，视频可以内联播放。而通过内联播放，我的意思是在页面中播放，而不需要切换到全屏模式。

- Philipp Werminghausen

---

Android 2.3+支持HTML5视频播放。 - Yuraj

附注：您可以使用类似于 iphone-inline-video 的东西为 iPhone/iPod 添加内联播放支持。 - fregante

Answer 1

在iOS 10中，如果在视频标签中添加playsinline属性，则可以内联播放视频。您可以使用('playsInline' in document.createElement('video'))来检测此功能。然而，这并不足够，因为桌面浏览器上不存在该功能 - 在那里内联播放显然是一个标准功能。因此，我想到了以下解决方案：如果不是 iPhone / iPad，则我们假设视频可以内联播放（这可能会导致某些 Android 设备失败）。否则，请运行上面的测试以检查 iOS 10。以下是我的 Modernizr 测试。

        Modernizr.addTest('inpagevideo', function ()
        {
            return navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline' in document.createElement('video')) : true;
        });

- Simon_Weaver

---

即使在视频元素上设置了playsInline，如果网页在未启用“allowsInlineMediaPlayback”（默认禁用）的webview中加载，它仍然不会播放内联。 - CamHart

Answer 2

从iOS 10开始，当在视频元素中添加属性playsinline时，电话也将提供视频全屏选项。

对于早期版本，可以使用webkit-playsinline，但仅当页面固定到主屏幕上时，iPhone才会尊重它。

<video webkit-playsinline playsinline></video>

要检测内联播放是否可用，可以使用canplay事件监听器，检查视频是否处于全屏状态。如果手机不支持内联播放，则在开始播放时直接进入全屏模式。

var inlinePlaybackSupported = true;
var elem = document.querySelector('video');

elem.addEventListener('canplay', function () {

    //if in fullscreen here, then inline playback is not supported;
    if (elem.webkitDisplayingFullscreen) {
        inlinePlaybackSupported = false;
    }
});

- inga

Answer 3

根据iOS特定注意事项文档:

Safari在iPhone或iPod touch上通过全屏播放视频来优化小屏幕的视频展示 - 触摸屏幕时会出现视频控件，视频会根据横竖屏模式缩放以适应屏幕。视频不会在网页中呈现。高度和宽度属性仅影响网页上分配的空间，而控件属性则被忽略。这仅适用于小屏幕设备上的Safari。在Mac OS X、Windows和iPad上，Safari在网页中内联播放视频。

iOS

var videoIsFullscreen = screen.width < 320 &&
                        navigator.userAgent.indexOf("Safari") > -1 &&
                        navigator.userAgent.indexOf("Chrome") == -1 &&
                        navigator.userAgent.match(/(iPhone|iPod)/);

请注意，我不确定小屏幕是否为320px，您应该调整此值。

编辑

看看这个帖子。

总结：

var isSmallScreen = screen.width <= 320;
/// the shadows here
var isWideScreen = screen.width >= 568;

---

毕竟，我找到了一篇可能对你有帮助的文章

如何在iPhone或Android上使用HTML5避免本机全屏视频播放器？

ANDROID

如何在Android浏览器中播放内联HTML5视频

请注意这是针对本机Android浏览器而非Android Chrome。

- rnrneverdies

---

谢谢！这已经帮了很多忙。知道什么被认为是小型会很好。您知道安卓是否有类似的规格吗？ - Philipp Werminghausen

也许“小”只是指像iPhone和iPod这样的小屏幕，而不是实际谈论像素宽度尺寸？ - Philipp Werminghausen

不需要检查所有的内容，所有的iPhone和iPod浏览器都可以全屏播放它，你只需要 videoIsFullscreen = /iPhone|iPod/i.test(navigator.userAgent - fregante

Answer 4

我使用的解决方案是这样的：

var video = document.createElement( 'video' );
...
video.addEventListener( 'playing', function () {
  // Note: we are adding event listener for 'playing' event, not for 'play' event!
  if ( video.webkitDisplayingFullscreen ) {
    console.log( 'Inline playback is not supported' );
  } else {
    console.log( 'Inline playback is supported' );
  }
}, false );

现在这种方法显然存在一个问题：你不知道内联是否被支持，直到视频开始播放之后才能确定。此外，如果用户暂停视频，事件可能会触发多次（这并不是一个真正的问题，但你必须小心）。

我已经在iPod touch、iPhone、iPad、Nexus 5和Htc One X上进行了测试。它在所有这些设备上都提供了正确的结果。

我不知道它是否适用于默认全屏播放视频的Android设备。个人而言，我从未见过Android设备以全屏播放视频。但在Nexus 5上运行我的方法会得到一个有趣的控制台日志消息：

'HTMLVideoElement.webkitDisplayingFullscreen' is deprecated. Please use the 'fullscreenchange' and 'webkitfullscreenchange' events instead.

所以我假设对于安卓系统，你需要使用类似这样的东西：

video.addEventListener( 'webkitfullscreenchange', function ( e ) {
    if ( document.webkitIsFullScreen ) {
        console.log( 'Inline playback is not supported' );
    } else {
        console.log( 'Inline playback is supported' );
    }
}, false );

但就我个人而言，我从未看到这个事件被触发。无论是在Android还是iOS上。

我已经在几个iOS设备上测试了一些不起作用的事情：

1. 属性video.webkitSupportsFullscreen-始终返回false
2. 事件'webkitendfullscreen'和'webkitenterfullscreen'-这些是有趣的-webkitendfullscreen工作得很好，但webkitenterfullscreen从未被触发

添加：

我实际上找到了一个仅以全屏模式显示视频的Android设备（Fly IQ245 Plus）。虽然它的行为与iOS非常相似，但我无法通过上述任何方法检测到全屏更改。

- Alexey