有没有一种好的方法可以检测客户端浏览器是否允许HTML5视频的内联播放?
更新
我不只是想检测视频支持情况。
我想要检测的是视频是否只能全屏播放还是也可以内联播放。因为在iPhone Safari上,iOS视频只能全屏播放,但在iPad上,视频可以内联播放。而通过内联播放,我的意思是在页面中播放,而不需要切换到全屏模式。
有没有一种好的方法可以检测客户端浏览器是否允许HTML5视频的内联播放?
更新
我不只是想检测视频支持情况。
我想要检测的是视频是否只能全屏播放还是也可以内联播放。因为在iPhone Safari上,iOS视频只能全屏播放,但在iPad上,视频可以内联播放。而通过内联播放,我的意思是在页面中播放,而不需要切换到全屏模式。
playsinline
属性,则可以内联播放视频。您可以使用('playsInline' in document.createElement('video'))
来检测此功能。然而,这并不足够,因为桌面浏览器上不存在该功能 - 在那里内联播放显然是一个标准功能。因此,我想到了以下解决方案:如果不是 iPhone / iPad,则我们假设视频可以内联播放(这可能会导致某些 Android 设备失败)。否则,请运行上面的测试以检查 iOS 10。以下是我的 Modernizr 测试。 Modernizr.addTest('inpagevideo', function ()
{
return navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline' in document.createElement('video')) : true;
});
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;
}
});
根据iOS特定注意事项文档:
Safari在iPhone或iPod touch上通过全屏播放视频来优化小屏幕的视频展示 - 触摸屏幕时会出现视频控件,视频会根据横竖屏模式缩放以适应屏幕。视频不会在网页中呈现。高度和宽度属性仅影响网页上分配的空间,而控件属性则被忽略。这仅适用于小屏幕设备上的Safari。在Mac OS 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,您应该调整此值。
编辑
看看这个帖子。
总结:
var isSmallScreen = screen.width <= 320;
/// the shadows here
var isWideScreen = screen.width >= 568;
毕竟,我找到了一篇可能对你有帮助的文章
如何在iPhone或Android上使用HTML5避免本机全屏视频播放器?
ANDROID
请注意这是针对本机Android浏览器而非Android Chrome。
videoIsFullscreen = /iPhone|iPod/i.test(navigator.userAgent
- fregantevar 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 );
'HTMLVideoElement.webkitDisplayingFullscreen' is deprecated. Please use the 'fullscreenchange' and 'webkitfullscreenchange' events instead.
所以我假设对于安卓系统,你需要使用类似这样的东西:
video.addEventListener( 'webkitfullscreenchange', function ( e ) {
if ( document.webkitIsFullScreen ) {
console.log( 'Inline playback is not supported' );
} else {
console.log( 'Inline playback is supported' );
}
}, false );
我实际上找到了一个仅以全屏模式显示视频的Android设备(Fly IQ245 Plus)。虽然它的行为与iOS非常相似,但我无法通过上述任何方法检测到全屏更改。