是否有检测客户端浏览器是否允许对 HTML5 视频进行内联媒体播放的好方法？
更新
我不想简单地检测视频支持。
我正在尝试检测视频是只能全屏播放还是内联播放。因为在 iPhone Safari 上 iOS 视频只能全屏播放，但在 iPad 上视频可以内联播放。内联是指在页面中而不切换到全屏。
【问题讨论】：
标签： javascript android ios html html5-video
在 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;
});
【讨论】：
而文件iOS-Specific Considerations 说：
目前，Safari 优化了小屏幕的视频演示 在 iPhone 或 iPod touch 上使用全屏播放视频—视频 触摸屏幕时会出现控件，并且视频会缩放到 以纵向或横向模式适应屏幕。视频未呈现 网页内。高度和宽度属性只影响 网页上分配的空间，并且控制属性被忽略。 这仅适用于小屏幕设备上的 Safari。在 Mac 操作系统上 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。
【讨论】：
videoIsFullscreen = /iPhone|iPod/i.test(navigator.userAgent
从 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;
}
});
【讨论】：
我正在使用的解决方案是这样的：
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 上对此进行了测试。它在所有这些设备上都提供了正确的结果。
我不知道它是否适用于默认全屏播放视频的安卓设备。就个人而言，我从未见过全屏播放视频的安卓设备。但是在 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 );
但就个人而言，我从未见过此事件被触发。无论是在安卓上，还是在 iOS 上。
我在几台 iOS 设备上测试过的其他一些不起作用的东西：
添加：
我实际上设法找到了一个只能全屏显示视频的安卓设备（Fly IQ245 Plus）。虽然它的行为与 iOS 非常相似，但我无法通过上述任何方式检测到全屏变化。
【讨论】：