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

Question

我正在使用Cordova和Angular Material前端开发一个跨平台应用程序。

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

然而，当我点击“切换全屏”按钮时，视频确实进入了全屏模式，但是默认控件消失了。在此之后，我无法回到应用程序 - 原生安卓返回按钮不会关闭全屏，而是关闭整个应用程序。

我正在寻找的解决方案将使控件始终出现，即使在全屏模式下也是如此；在iOS上运行相同的代码时，这是开箱即用的。

因此，如果可能的话，我不想花时间开发自己的定制视频控件，以适配安卓！因此，请不要发布关于如何做到这一点的答案（SO和其他地方已经有很多了）。

我使用的是Meizu m2 note安卓设备。

谢谢！

编辑：

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

有任何想法吗？

- Adam Diament

---

已使用示例应用程序进行了检查，我确实看到了全屏控件。您可以删除所有内容并使用一个非常简单的视频标记，如下所示： <video width="400" controls><source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4> </video> - manishg

无法解决缺失控件问题，但是请注意，您可以覆盖返回按钮行为（并在全屏时缩小视频）。 - Yoni Gross

谢谢manishag，这个视频也有同样的问题。我认为这是一个设备特定的问题。 - Adam Diament

更新：控件似乎仍然存在，但大小设置为0像素乘以0像素。然而，在远程调试时在Chrome开发工具中手动设置它们的大小并不起作用，即使我使用!important选择器也是如此。非常奇怪！ - Adam Diament

@AdamDiment 你好，谢谢更新。我已经发布了答案。但是我不确定是否能获得赏金，因为赏金期限和宽限期已经结束了。如果您能给予赏金，那就太好了。 - Gandhi

Answer 1

这是一个与魅族设备使用的Flyme OS有关的问题。由于控件是可用但不可见的，因此应通过升级Flyme OS来解决此问题。

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

- Gandhi

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

- Shobhit

---

谢谢，但这并没有回答我的问题。我想让控件出现，而不是对全屏功能进行编程访问。 - Adam Diament

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

- Hemanth S

---

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