检测浏览器/设备是否支持HTML5视频内联播放

Question

检测浏览器/设备是否支持HTML5视频内联播放

iphonehtml5-videodetection

9

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

可以制作一个所有不支持内联播放视频的浏览器/设备列表，但我想知道是否有另一种解决方案。

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

- Dairo

你有没有找到解决这个问题的方法？ - JSuar

@JSuar 我还没有找到解决方案，认为目前无法在JavaScript中检查本机播放器是否会自动播放视频。我认为浏览器构建者需要向浏览器添加一些额外的信息，这样就可以像读取“navigator.video.playsInBrowser”这样的内容了。 - Dairo

如果您仍需要帮助，我可以提供检测iPhone浏览器的代码，使用if和else语句。当然，iPhone会在自己的视频播放器中播放，而不是在浏览器中播放。 - shaun

看看这个问题：https://dev59.com/ymUq5IYBdhLWcg3wSelm - Ofer Herman

@OferHerman 感谢您的评论。您分享的问题仅表明如何使用非视频标签支持的浏览器回退。我的问题是，例如iPhone上的Safari和桌面上的Chrome都支持视频标签，但iPhone上的Safari决定在其自己的播放器中播放视频而不是在浏览器中播放。需要检测，以便可以仅对在浏览器中播放视频的浏览器应用于视频上的叠加层，并且决定在浏览器外部播放视频的视频标签支持浏览器可以有一个回退，如图像。 - Dairo

@Dairo 看起来唯一的选择是使用 userAgent 属性，因为规范仅适用于内联视频播放，外部播放器取决于设备。 - Ofer Herman

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- avaunt · Accepted Answer

我知道这是一个老问题，但对我来说这是一个大问题，在网上找不到很多信息。但在这个主题中，我找到了Alexey的答案，可以回答你的问题：检测客户端是否允许HTML5视频内联播放。

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

这是坏消息。问题在于，像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;
};