检测浏览器/设备是否可以在播放之前内联播放HTML5视频

Question

我知道我可以通过navigator.userAgent检查该设备是否为iPhone，但是还有其他设备，有些我不知道哪个设备会在自己的播放器中播放视频。

可以列出所有不播放视频的浏览器/设备列表，但我想知道是否还有其他解决方案。

是否有可能在JavaScript中检测浏览器（例如iPhone上的Safari）是否在其自己的播放器中播放视频而不是内联播放？因此，可以显示替代方案，例如图像，而不是视频。

Answer 1

我知道这是一个老问题，但这对我来说是个大问题，并且网上没有很多信息。但在我找到Alexey的回答后，我可以回答你的问题：Detect if client allows inline media playback for HTML5 video。

不，在播放之前，您无法检测浏览器/设备是否支持内联视频。

这是个坏消息。问题是iPhone上的iOS Safari浏览器唯一可靠的检查是启动视频播放，然后嗅探它是否立即进入全屏本机模式。如果你让一个玩家在触发游戏事件时自动进入全屏模式，那么即使这样也会失败。

至少在我看来，好消息是，只要它开始播放，并且使用CSS媒体查询来检测屏幕尺寸，我应该能够完成我想要做的事情。

这里是从我的播放器JS中获取的相关位，非常源自上面的链接。

这仅在视频开始播放后检测内联支持

// Expose useful properties of the video
var vid = (function(){
    var elem = document.getElementsByTagName('video')[0];
    return {elem:elem};
})();
// Test for inline playback support
var inlineTest = (function() {
    if ( vid.elem.webkitFullscreenchange || vid.elem.mozFullscreenchange || vid.elem.MSFullscreenChange || vid.elem.fullscreenchange ) {
        return 'inline-no';
    } else {
        return 'inline-yes'
    }
});
// play() functions
vid.elem.onplay = function(){
        var inlineSupport = inlineTest();
        document.body.className += ' ' + inlineSupport;
};