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

Question

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

可以列出所有不播放视频内嵌的浏览器/设备,但我想知道是否有其他解决方案.

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

Answer 1

我知道这是一个老问题，但这对我来说是一个大问题，而且网上没有很多信息。但是，在我在此线程中找到 Alexey 的答案后，我可以回答您的问题：Detect if client allowed inline media play 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;
};