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

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

更新

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

我正在尝试检测一个视频是否只能全屏播放或同时在线播放。因为在iPhone safari上，iOS视频只能全屏播放，但在iPad上，视频可以在线播放。内联是指在页面中不切换到全屏。

而文档中说：

目前，Safari优化了较小屏幕的视频演示 在iPhone或iPod touch上使用全屏视频播放视频 触摸屏幕时会显示控件，视频会缩放到 在纵向或横向模式下安装屏幕。没有播放视频 在网页内。“高度”和“宽度”属性仅影响 网页上分配的空间，忽略控件属性。 这仅适用于小屏幕设备上的Safari。在Mac OS上 十、 在Windows和iPad上，Safari在线播放视频，嵌入到 网页

iOS

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

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;

var isSmallScreen=screen.width=568；

---

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

ANDROID

---

请注意，这是针对本机Android浏览器的，不是针对Android Chrome的。

我使用的解决方案是：

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

现在，这种方法显然存在一个问题：在视频开始播放之前，您不知道是否支持内联。此外，如果用户暂停视频，该事件可能会触发多次（这不是问题，但您必须小心）

我已经在iPodtouch、iPhone、iPad、Nexus5和HTCAnex上进行了测试。它在所有这些设备上都提供了正确的结果

我不知道它是否能在默认全屏播放视频的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设备上测试过的其他一些东西，不起作用：

属性video.webkitSupportsFullscreen-始终返回false

事件“webkitendfullscreen”和“webkitenterfullscreen”-这些都是有趣的事件-webkitendfullscreen工作正常，但webkitenterfullscreen从不被解雇

添加：

---

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

从iOS 10开始，当向视频元素添加属性

playsinline

时，手机也可以使用视频全屏选项

对于早期版本，可以使用

webkit playsinline

，但只有当页面固定在主屏幕上时，iPhone才会使用它

<video webkit-playsinline playsinline></video>

---

在iOS10中，如果将

playsinline

属性添加到视频标记，则现在可以在线播放视频

您可以使用

（'playsInline'在document.createElement（'video'））中检测到这一点。

但是，这还不够，因为桌面浏览器上不存在这种功能——显然，内联播放是一种标准功能

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

这是我的现代化测试

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

---

Android 2.3+支持HTML5视频播放。旁注：您可以通过类似“谢谢”的方式在iPhone/iPod上添加对内联播放的支持！这已经帮了大忙了。如果知道什么是小的就好了。你知道安卓系统是否有类似的规格吗？也许它只是指一个小屏幕，比如iPhone和iPod上的小屏幕，它实际上并不是指像素宽度尺寸？不需要检查所有这些，所有iPhone和iPod浏览器都会全屏播放，你只需要

videoIsFullscreen=/iPhone|iPod/i.test（navigator.userAgent

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