HTML5 视频控件在 Android 设备上以全屏模式消失

Posted 2023-05-08

【中文标题】HTML5 视频控件在 Android 设备上以全屏模式消失

【英文标题】：HTML5 video controls disappear in full-screen mode on android devices

【发布时间】：2017-06-14 17:14:22

【问题描述】：

我正在开发一个跨平台应用程序，使用带有角材料前端的cordova。

我在 md 卡列表中使用 html5 视频标签来播放带有外部 url 的视频。内联时，视频可以正确播放，并按预期显示本机控件。

    <video class="project-video" video-directive item="$ctrl.project" ng-src="$ctrl.project.videoUrl | trustUrl" preload="auto"
      controls poster="$ctrl.project.video.thumbnail_url">
      Your browser does not support the video tag.
    </video>

但是，当我单击“切换全屏”按钮时，视频确实会进入全屏状态，但默认控件会消失。在此之后我无法返回应用程序 - 原生 android 后退按钮不会关闭全屏 - 而是关闭整个应用程序。

我正在寻找的解决方案将使控件即使在全屏模式下也始终出现；这可以在 ios 上运行相同的代码。

因此，如果我能帮上忙，我不想花时间开发我自己的自定义视频控件只为 android ！所以请不要发布关于如何做到这一点的答案（在 SO 和其他地方已经有很多可用的答案）。

我使用的是魅族 m2 note android 设备。

谢谢！

编辑：

控件仍然存在，但在 css 中的阴影 DOM 树中显示为大小为 0 x 0px。即使我使用 !important 标志在 chrome 开发工具中更改它们的大小，它们也不会显示出来。

有什么想法吗？

【问题讨论】：

您是在使用fastclick还是在设备中的mozilla浏览器中进行测试？

两者都不是。我正在使用终端命令运行应用程序

cordova 运行 android --device

对缺少控件的问题没有多大帮助，但仅供参考，您可以override the back button behavior（如果全屏显示，则可以缩小视频）。

@AdamDiment 您好，感谢您的更新。已经发布了答案。但不确定是否会获得赏金，因为我猜包括宽限期在内的赏金期已经结束:(如果你能提供赏金那就太好了。

【参考方案1】：

这是魅族设备使用的 Flyme OS 的问题。由于控件可用且不可见，因此应通过升级 Flyme 操作系统来解决。

请更新 Flyme 操作系统以解决此问题，因为旧版本的 Flyme 似乎在全屏视频模式方面存在一些问题。希望能帮助到你。干杯

【参考方案2】：

设置允许退出全屏的值。

var videoElement = document.getElementById("myvideo");

 function toggleFullScreen() 
if (!document.mozFullScreen && !document.webkitFullScreen) 
  if (videoElement.mozRequestFullScreen) 
    videoElement.mozRequestFullScreen();
   else 
    videoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
  
  document.mozFullScreen = true;
  document.webkitFullScreen = true;
 else 
  if (document.mozCancelFullScreen) 
    document.mozCancelFullScreen();
   else 
    document.webkitCancelFullScreen();
   
 
 

document.addEventListener("keydown", function(e) 
if (e.keyCode == 13) 
  toggleFullScreen();

, false);

添加这两行 ..

document.mozFullScreen = true;

document.webkitFullScreen = true;

如果你想要更好的东西

 fullScreenButton.addEventListener("click", function() 
 if (!document.fullscreenElement &&    // alternative standard method
  !document.mozFullScreenElement && !document.webkitFullscreenElement &&      !document.msFullscreenElement )   // current working methods
 if (video.requestFullscreen) 
  video.requestFullscreen();
  else if (video.msRequestFullscreen) 
  video.msRequestFullscreen();
  else if (video.mozRequestFullScreen) 
  video.mozRequestFullScreen();
  else if (video.webkitRequestFullscreen) 
  video.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
 
 else 
 if (document.exitFullscreen) 
  document.exitFullscreen();
  else if (document.msExitFullscreen) 
  document.msExitFullscreen();
  else if (document.mozCancelFullScreen) 
  document.mozCancelFullScreen();
  else if (document.webkitExitFullscreen) 
  document.webkitExitFullscreen();
 

  );

【讨论】：

谢谢，但这并不能回答问题。我希望控件出现，而不是对全屏功能进行编程访问

【参考方案3】：

在您的代码中如何处理您未提及的控件属性完全可能导致问题

<video id="myvideo">
  <source src="path/to/movie.mp4" />
</video>

<p onclick="toggleControls();">Toggle</p>

<script>
var video = document.getElementById("myvideo");

function toggleControls() 
  if (video.hasAttribute("controls")) 
     video.removeAttribute("controls")   
   else 
     video.setAttribute("controls","controls")   
  

</script>

【讨论】：

试过这个答案 - 控件仍然存在，但显示在 css 的阴影 DOM 树中，大小为 0 x 0px。即使我使用 !important 标志在 chrome 开发工具中更改它们的大小，它们也不会显示