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

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

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

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

Спасибо!

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

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

Любые идеи?


person Adam Diament    schedule 29.01.2017    source источник
comment
Вы случайно не используете fastclick или тестируете в браузере Mozilla на устройстве?   -  person Gandhi    schedule 07.02.2017
comment
Ни один. Я запускаю приложение с помощью команды терминала   -  person Adam Diament    schedule 07.02.2017
comment
кордова запустить android --device   -  person Adam Diament    schedule 07.02.2017
comment
Любая трассировка ошибки в консоли устройства при переключении в полноэкранный режим? Любые другие сторонние библиотеки, которые вы используете в приложении?   -  person Gandhi    schedule 07.02.2017
comment
Проверено с помощью примера приложения, и я вижу элементы управления в полноэкранном режиме. Можете ли вы удалить все и использовать очень простой тег видео, такой как этот ‹video width=400 elements› ‹source src=techslides.com/demos/sample-videos/small.mp4 type=video/mp4› ‹/video›   -  person manishg    schedule 12.02.2017
comment
Не могу помочь с проблемой отсутствия элементов управления, но, к вашему сведению, вы можете переопределяет поведение кнопки "Назад" (и сжимает видео, если оно отображается в полноэкранном режиме).   -  person Yoni Gross    schedule 13.02.2017
comment
Я предлагаю изменить высоту и ширину вручную на размер устройства, вычислив его программно, или может быть другая проблема, когда вы делаете полноэкранный режим, для атрибута управления установлено значение false   -  person rohit salaria    schedule 13.02.2017
comment
Спасибо, manishag, такое же поведение с этим видео. Я думаю, что это проблема конкретного устройства.   -  person Adam Diament    schedule 13.02.2017
comment
Обновление: кажется, что элементы управления все еще существуют, но установлены на размер 0 пикселей, умноженный на 0 пикселей. Однако установка их размера вручную в инструментах chrome dev во время удаленной отладки ничего не делает, даже если я использую селектор !important. Очень странно!   -  person Adam Diament    schedule 14.02.2017
comment
@AdamDiment Используете ли вы стоковый видеоплеер flyme для воспроизведения видео? Не могли бы вы проверить, происходит ли это во всех приложениях видеоплеера? Я подозреваю, что это может быть ошибка с приложением видеоплеера flyme. Также посмотрите, можете ли вы обновить версию flyme, и проверьте, так как в более старых версиях есть какие-то проблемы в полноэкранном режиме.   -  person Gandhi    schedule 14.02.2017
comment
@ Ганди спасибо - я проверю позже.   -  person Adam Diament    schedule 14.02.2017
comment
@AdamDiment Пожалуйста, держите нас в курсе. Спасибо   -  person Gandhi    schedule 14.02.2017
comment
Элементы управления @Gandhi в полноэкранном режиме были восстановлены, когда я обновил программное обеспечение flyme, спасибо за предложение. Если вы опубликуете его как ответ, я проголосую за него и отмечу его как принятый, что позволит вам по-прежнему получать половину награды. Ваше здоровье!   -  person Adam Diament    schedule 16.02.2017
comment
@AdamDiment Привет, спасибо за обновление. Опубликовали ответ. Но я не уверен в получении вознаграждения, так как период вознаграждения, включая льготный период, закончился, я думаю :( Если бы вы могли дать вознаграждение, это было бы здорово.   -  person Gandhi    schedule 16.02.2017
comment
@Gandhi, если он получит 2 или более голосов, он получит половину награды   -  person Adam Diament    schedule 16.02.2017
comment
@AdamDiment Это происходит во время периода вознаграждения. Но я думаю, что все кончено. Думаю, для меня это большой промах :(   -  person Gandhi    schedule 16.02.2017
comment
@ Ганди неправда. см. ответ здесь meta.stackexchange. com/questions/16065/ В противном случае награда присуждается за ответ с наивысшим баллом из тех, которые... ...были опубликованы после начала розыгрыша ...имели оценку не менее +2 ... не были написаны баунти-стартером, поэтому за него нужно проголосовать как минимум дважды.   -  person Adam Diament    schedule 16.02.2017
comment
@AdamDiment Проверьте это - заголовок meta.stackexchange.com/questions/147576/ Теперь я не вижу уведомления о награде по вашему вопросу.   -  person Gandhi    schedule 16.02.2017
comment
Давайте продолжим обсуждение в чате.   -  person Adam Diament    schedule 16.02.2017


Ответы (3)


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

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

person Gandhi    schedule 16.02.2017

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

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();
 }
}
  });
person Shobhit    schedule 13.02.2017
comment
Спасибо, но это не ответ на вопрос. Я хочу, чтобы элементы управления появлялись, а не имели программный доступ к полноэкранным функциям - person Adam Diament; 14.02.2017

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

<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>
person Hemanth S Tobi    schedule 14.02.2017
comment
Пробовал этот ответ - элементы управления все еще там, но отображаются в теневом дереве DOM в css размером 0 x 0px. Даже когда я изменяю их размер в инструментах разработчика Chrome, используя флаг !important, они не отображаются - person Adam Diament; 14.02.2017