检测客户端是否允许对HTML5video进行内嵌媒体播放

有没有一种好的方法来检测客户端浏览器是否允许HTML5video的内嵌媒体播放?

更新

我不是简单地检测video支持。

我试图检测一个video只能播放全屏或内嵌。 因为在iPhone Safari上,iOSvideo只能全屏播放,而iPad上的video可能是内嵌播放的。 而内嵌的意思是在页面中不切换到全屏。

在iOS10中,如果将playsinline属性添加到video标签,则现在可以内嵌video播放。

你可以用('playsInline' in document.createElement('video'))来检测这个。

然而,这还不够,因为这在桌面浏览器上不存在 – 显然播放内联是标准function。

所以这就是我想出的:如果不是iPhone / iPad,那么我们只是假设video可以内联播放(这可能会失败,某些Android设备)。 否则,运行上面的testing来检查iOS10

这是我的Modernizrtesting。

  Modernizr.addTest('inpagevideo', function () { return navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline' in document.createElement('video')) : true; }); 

鉴于iOS特定注意事项文件说:

目前,Safari通过使用全屏video播放video来优化iPhone或iPod touch上的较小屏幕的video演示,当屏幕被触摸时会出现video控件,并且video被缩放以适应纵向或横向模式的屏幕。 video不在网页中显示。 高度和宽度属性仅影响网页上分配的空间,而忽略controls属性。 这只适用于小屏幕设备上的Safari。 在Mac OS X,Windows和iPad上,Safari播放embedded在网页中的video。

iOS版

 var videoIsFullscreen = screen.width < 320 && navigator.userAgent.indexOf("Safari") > -1 && navigator.userAgent.indexOf("Chrome") == -1 && navigator.userAgent.match(/(iPhone|iPod)/); 

请注意,我不知道如果小屏幕是320px,你应该调整这个值。

编辑

看看这个post 。

总结:

 var isSmallScreen = screen.width <= 320; /// the shadows here var isWideScreen = screen.width >= 568; 

毕竟,我发现这个post,可以帮助你很多

我可以避免在iPhone或Android上使用HTML5的原生全屏video播放器吗?

ANDROID

如何在Android Browser中播放内嵌html5video

请注意,本机Android浏览器不适用于Android Chrome。

从iOS 10video全屏选项开始,手机也可以使用,在video元素中添加播放属性playsinline

对于较早的版本,可以使用webkit-playsinline ,但只有当页面固定到主屏幕时才会在iPhone上使用。

 <video webkit-playsinline playsinline></video> 

要检测是否有内联播放function,可以使用canplay事件监听器来检查video是否全屏显示。 如果手机不支持内联播放,则开始播放时将直接进入全屏。

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

我使用的解决scheme是这样的:

 var 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 ); 

现在这个问题显然有一个问题:直到video开始播放之后,才知道是否支持内联。 另外,如果用户暂停video,事件可能会触发多次(不是真的有问题,但必须小心)。

我已经在iPod touch,iPhone,iPad,Nexus 5和Htc One X上进行了testing。它在所有这些devise上都提供了正确的解决scheme。

我不知道它是否会在默认情况下全屏播放video的Android设备上工作。 就个人而言,我从来没有看到一个Android设备,全屏播放video。 但是在nexus 5上运行我的方法给了一个有趣的控制台日志消息:

 'HTMLVideoElement.webkitDisplayingFullscreen' is deprecated. Please use the 'fullscreenchange' and 'webkitfullscreenchange' events instead. 

所以我认为,对于android你将不得不使用类似的东西:

 video.addEventListener( 'webkitfullscreenchange', function ( e ) { if ( document.webkitIsFullScreen ) { console.log( 'Inline playback is not supported' ); } else { console.log( 'Inline playback is supported' ); } }, false ); 

但个人而言, 我从来没有看到这个事件被解雇 。 无论是在Android上,也不在iOS上。

我在几个iOS设备上testing过的其他一些不起作用的东西:

  1. 属性video.webkitSupportsFullscreen – 总是返回false
  2. 事件“webkitendfullscreen”和“webkitenterfullscreen” – 这些都是有趣的 – webkitendfullscreen工作得很好,但webkitenterfullscreen永远不会被解雇

添加:

我实际上设法find一个只显示全屏(Fly IQ245 Plus)的video的Android设备。 尽pipe其行为与iOS非常相似,但我无法通过上述任何方式检测到全屏更改。