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-Specific Considerations说：

目前，Safari优化了较小屏幕的视频演示在iPhone或iPod touch上使用全屏视频播放视频触摸屏幕时会出现控件，并且视频会缩放到以纵向或横向模式适合屏幕。视频未显示在网页内。高度和宽度属性仅影响在网页上分配的空间，并忽略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，您应该调整此值。~~

修改

看看这个post。

汇总：

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

毕竟，我发现这篇文章可能会对你有所帮助

Can I avoid the native fullscreen video player with HTML5 on iPhone or android?

<强>机器人

How to play inline html5 video in Android Browser

请注意，原生Android浏览器不适用于Android Chrome。

Answer 3

在向视频元素添加属性RetryInterceptorBuilder时，从iOS 10视频全屏选项开始也适用于手机。

对于早期版本playsinline可以使用，但只有在将页面固定到主屏幕时才会在iPhone上使用它。

webkit-playsinline

要检测内联播放是否可用<video webkit-playsinline playsinline></video>可以使用事件监听器，以检查视频是否全屏显示。如果手机不支持内联播放，则在开始播放时将直接进入全屏状态。

canplay

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设备上测试过的其他一些事情 DOESN＆＃39; WORK ：

property video.webkitSupportsFullscreen - 始终返回false
events＆＃39; webkitendfullscreen＆＃39;和＆＃39; webkitenterfullscreen＆＃39; - 这些都是有趣的 - webkitendfullscreen工作正常，但webkitenterfullscreen永远不会被解雇

<强>增加：

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

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

4 个答案: