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

4 回答

• 2

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

  回复于 2024-04-29T15:57:19+08:00
• 3

  文件iOS-Specific Considerations说：

  目前，Safari通过在触摸屏幕时显示全屏幕视频控件来优化iPhone或iPod touch上较小屏幕的视频演示，并缩放视频以适应纵向或横向模式的屏幕 . 视频未在网页中显示 . height和width属性仅影响分配在网页上的空间，并忽略controls属性 . 这仅适用于具有小屏幕的设备上的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，您应该调整此值 .

  EDIT

  看看这个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?

  ANDROID

  How to play inline html5 video in Android Browser

  请注意，适用于原生Android浏览器，不适用于Android Chrome .

  回复于 2024-04-29T15:57:19+08:00
• 1

  在向视频元素添加属性 playsinline 时，从iOS 10视频全屏选项开始也可用于手机 .

  对于早期版本，可以使用 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;
      }
  });
  

  回复于 2024-04-29T15:57:19+08:00
• 2

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

  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上进行了测试 . 它为所有这些设备提供了正确的结果 .

  我不知道它是否适用于默认情况下全屏播放视频的Android设备 . 就个人而言，我从来没有看过一个全屏播放视频的Android设备 . 但是在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 );
  

  但就个人而言， I never saw this event being fired . 既不是Android，也不是iOS .

  我在几个iOS设备上测试过的其他一些东西 DOESN'T WORK ：

  • property video.webkitSupportsFullscreen - 始终返回false

  • events 'webkitendfullscreen'和'webkitenterfullscreen' - 这些都是有趣的 - webkitendfullscreen工作正常，但webkitenterfullscreen永远不会被解雇

  ADDED:

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

  回复于 2024-04-29T15:57:19+08:00