HTML5 视频控件在 android 台设备的全屏模式下消失

Question

我正在使用带有 angular material 前端的 cordova 开发跨平台应用程序。

我在 md-cards 列表中使用 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>

但是，当我单击 "toggle full-screen" 按钮时，视频会进入全屏模式，但默认控件会消失。之后我无法返回应用程序 - 本机 android 后退按钮不会关闭全屏 - 而是关闭整个应用程序。

我正在寻找的解决方案将使控件即使在全屏模式下也始终显示；这在 iOS 上计算出框运行相同的代码。

因此，如果可以的话，我不想花时间为 android 开发自己的自定义视频控件！所以请不要 post 回答有关如何做到这一点的问题（SO 和其他地方已经有很多答案）。

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

谢谢！

编辑：

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

有什么想法吗？

Answer 1

设置允许退出全屏的值。

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

Answer 2

在你的代码中这个你没有提到的控件属性完全可能是导致问题的原因

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

Answer 3

这是魅族设备使用的 Flyme OS 的问题。由于控件可用但不可见，这应该通过升级 Flyme 来解决 OS.

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

HTML5 视频控件在 android 台设备的全屏模式下消失

HTML5 video controls disappear in full-screen mode on android devices

android

html5-video

cordova

android-fullscreen

html5-fullscreen