Элементы управления видео HTML5 исчезают в полноэкранном режиме на устройствах android

Question

Элементы управления видео HTML5 исчезают в полноэкранном режиме на устройствах android

Я разрабатываю кросс-платформенное приложение, используя cordova с угловым материальным передним концом.

Я использую HTML5 Видео теги в списке md-карт для воспроизведения видео с внешними 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 и в других местах).

Я использую Meizu m2 note android устройство.

Спасибо!

Правка:

Элементы управления все еще существуют, но отображаются в дереве shadow DOM в css как имеющие размер 0 x 0px. Даже когда я изменяю их размер в chrome dev tools с помощью !важный флаг, они не появляются.

Есть идеи?

730 3

android cordova html5-video html5-fullscreen

3 ответов:

Comments

Ничего не найдено.

Gandhi · Accepted Answer · 2017-02-16 12:25:07

Это проблема с ОС Flyme, которая используется устройствами Meizu. Поскольку элементы управления доступны и не видны, это должно быть решено путем укрупнения ОС Flyme.

Пожалуйста, обновите Flyme OS, чтобы решить эту проблему, поскольку старые версии Flyme, похоже, имеют некоторые проблемы с полноэкранным видеорежимом. Надеюсь, это поможет. Ура

Shobhit · Accepted Answer · 2017-02-13 06:31:37

Задайте значения, которые затем позволяют выйти из полноэкранного режима.

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

Hemanth S Tobi · Accepted Answer · 2017-02-14 06:27:01

Как насчет этого в вашем коде ваш не упомянутый атрибут controls полностью может быть тем, что может вызвать проблему
<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>