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

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

Я использую HTML-теги видео в списке 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> 

Однако, когда я нажимаю кнопку «Переключить полноэкранный режим», видео переходит в полноэкранный режим, но элементы управления по умолчанию исчезают. После этого я не могу вернуться в приложение – встроенная андроидальная кнопка не закрывает полный экран – вместо этого она закрывает все приложение.

Решение, которое я ищу, заставит элементы управления всегда появляться даже в полноэкранном режиме; Это выдает окно, в котором работает тот же код на iOS.

Поэтому я не хочу тратить время на разработку собственных пользовательских элементов управления видео только для андроида, если я могу помочь! Поэтому, пожалуйста, не публикуйте ответы о том, как это сделать (много уже доступно в SO и в других местах).

Я использую Android-устройство для заметок Meizu m2.

Благодаря!

РЕДАКТИРОВАТЬ:

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

Есть идеи?

Solutions Collecting From Web of "Элементы управления видео HTML5 исчезают в полноэкранном режиме на устройствах Android"

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

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

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

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

Как насчет этого в вашем коде, ваш полностью не упомянутый атрибут элементов управления может быть причиной проблемы

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