检测客户端是不是允许 HTML5 视频的内​​联媒体播放

Posted 2023-05-08

【中文标题】检测客户端是不是允许 HTML5 视频的内​​联媒体播放

【英文标题】：Detect if client allows inline media playback for HTML5 video检测客户端是否允许 HTML5 视频的内​​联媒体播放

【发布时间】：2014-10-16 14:00:12

【问题描述】：

是否有检测客户端浏览器是否允许对 html5 视频进行内联媒体播放的好方法？

更新

我不想简单地检测视频支持。

我正在尝试检测视频是只能全屏播放还是内联播放。因为在 iPhone Safari 上 ios 视频只能全屏播放，但在 iPad 上视频可以内联播放。内联是指在页面中而不切换到全屏。

【问题讨论】：

android 2.3+ 支持 HTML5 视频播放。

旁注：您可以添加对 iPhone/iPod 上的内联播放的支持，例如 iphone-inline-video

【参考方案1】：

在 iOS10 中，如果将 playsinline 属性添加到视频标签，您现在可以内联播放视频。

您可以使用('playsInline' in document.createElement('video')) 检测到这一点。

但这还不够，因为这在桌面浏览器上不存在 - 显然内联播放是一项标准功能。

所以这就是我想出的：如果不是 iPhone / iPad，那么我们只是假设可以内联播放视频（这对于某些 android 设备可能会失败）。否则运行上面的测试来检查 iOS10

这是我的 Modernizr 测试。

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

【参考方案2】：

而文件iOS-Specific Considerations 说：

目前，Safari 优化了小屏幕的视频演示 在 iPhone 或 iPod touch 上使用全屏播放视频—视频 触摸屏幕时会出现控件，并且视频会缩放到 以纵向或横向模式适应屏幕。视频未呈现 网页内。高度和宽度属性只影响 网页上分配的空间，并且控制属性被忽略。 这仅适用于小屏幕设备上的 Safari。在 Mac 操作系统上 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，您应该调整此值。

编辑

看看这个post。

总结：

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

---

毕竟，我发现这篇文章可能对你有很大帮助

Can I avoid the native fullscreen video player with HTML5 on iPhone or android?

安卓

How to play inline html5 video in Android Browser

请注意，这适用于原生 Android 浏览器，而不适用于 Android Chrome。

【讨论】：

谢谢！这已经很有帮助了。很高兴知道什么被认为是小的。不知道android有没有类似的规格？

也许小它只是指 iPhone 和 iPod 上的小屏幕，实际上并不是在谈论像素宽度尺寸？

无需检查所有这些，所有 iPhone 和 iPod 浏览器都可以全屏播放，您只需要 videoIsFullscreen = /iPhone|iPod/i.test(navigator.userAgent

【参考方案3】：

从 iOS 10 开始，视频全屏选项也可用于手机，将属性 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;
    
);

【参考方案4】：

我正在使用的解决方案是这样的：

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

现在这种方法显然存在一个问题：直到视频开始播放后，您才知道是否支持内联。此外，如果用户暂停视频，该事件可能会触发多次（这不是问题，但您必须小心）。

我已经在 iPod touch、iPhone、iPad、Nexus 5 和 Htc One X 上对此进行了测试。它在所有这些设备上都提供了正确的结果。

我不知道它是否适用于默认全屏播放视频的安卓设备。就个人而言，我从未见过全屏播放视频的安卓设备。但是在 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 );

但就个人而言，我从未见过此事件被触发。无论是在安卓上，还是在 iOS 上。

我在几台 iOS 设备上测试过的其他一些不起作用的东西：

属性 video.webkitSupportsFullscreen - 总是返回 false 事件 'webkitendfullscreen' 和 'webkitenterfullscreen' - 这些是有趣的 - webkitendfullscreen 工作正常，但 webkitenterfullscreen 永远不会被触发

添加：

我实际上设法找到了一个只能全屏显示视频的安卓设备（Fly IQ245 Plus）。虽然它的行为与 iOS 非常相似，但我无法通过上述任何方式检测到全屏变化。