检测浏览器/设备是否可以在播放之前内联播放HTML5视频 [英] Detect if browser / device can play HTML5 video inline before playing

问题描述

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

I know I can check through navigator.userAgent if the device is an iPhone, but there are other devices and some I'm not aware of which will play the video in it's own player.

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

There can be made a list of all browsers/devices which don't play a video inline, but I wonder if there is another solution.

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

Is it possible in JavaScript to detect if a browser, for example Safari on iPhone, plays a video in it's own player instead of inline? So it can be possible to show an alternative, like an image, instead of the video.

推荐答案

我知道这是一个旧的问题，但对我来说这是一个大问题，网上没有很多信息。但是我在这个帖子中找到Alexey的答案之后我可以回答你的问题：检测客户端是否允许HTML5视频的内联媒体播放。

I know this is an old question, but it's a big issue for me and there isn't a lot of information online. But I can answer your question after I found Alexey's answer in this thread: Detect if client allows inline media playback for HTML5 video.

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

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

That's the bad news. The problem is that the only reliable check for browsers like iOS Safari on iPhone is to start the video playing and then sniff if it instantly went to full screen native mode. Even that would fail if you made a player that automatically went to fullscreen on when the play event was triggered.

好消息，至少在我看来，是通过检测它一旦开始播放与使用CSS媒体查询来检测屏幕大小我应该能够完成我正在尝试做的事情。

The okay news, at least for me, is that by detecting it as soon as it starts playing along with using CSS media queries to detect screen size I should be able to accomplish what I'm trying to do.

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

Here's the relevant bits taken from my player JS, very much derived from this link above.

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

// 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;
};

这篇关于检测浏览器/设备是否可以在播放之前内联播放HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！