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

Question

是否有一种很好的方法来检测客户端浏览器是否允许HTML5视频的内联媒体播放？

更新

我不是想简单地检测视频支持。

我正在尝试检测视频是否只能播放全屏或内联播放。 因为在iPhone的Safari游戏中，iOS视频只能全屏播放，但在iPad上可以在线播放视频。 并且通过内联我的意思是在页面中没有切换到全屏。

Answer 1

在iOS10中，如果将playsinline属性添加到视频标记，您现在可以内联视频播放。

您可以使用('playsInline' in document.createElement('video'))来检测它。

但这还不够，因为桌面浏览器不会存在这种情况 - 显然，内联播放是标准功能。

所以这就是我提出的：如果不是iPhone / iPad，那么我们只假设视频可以内联播放（对于某些Android设备可能会失败）。 否则运行上面的测试以检查iOS10

这是我的Modernizr测试。

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

Answer 2

鉴于iOS特定注意事项的文档说：

目前，Safari通过在触摸屏幕时使用全屏幕视频控件播放视频，优化iPhone或iPod touch上较小屏幕的视频演示，并缩放视频以适应纵向或横向模式的屏幕。 视频未在网页中显示。 height和width属性仅影响分配在网页上的空间，并忽略controls属性。 这仅适用于具有小屏幕的设备上的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。

Answer 3

从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;
    }
});

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.

所以我认为对于Android你必须使用类似的东西：

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. property video.webkitSupportsFullscreen - 始终返回false
2. events'webkitendfullscreen'和'webkitenterfullscreen' - 这些都是有趣的 - webkitendfullscreen工作正常，但webkitenterfullscreen永远不会被解雇

添加：

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