Kontrolki wideo HTML5 znikają w trybie pełnoekranowym na urządzeniach z Androidem

Question

Zajmuję się tworzeniem aplikacji na wielu platformach z użyciem cordova z przednim końcem materiału kątowego.

Używam tagów wideo HTML5 na liście kart md do odtwarzania filmów z zewnętrznymi adresami URL. Po wstawieniu filmy są odtwarzane poprawnie i wyświetlaj rodzime formanty zgodnie z oczekiwaniami.

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

Jednak po kliknięciu przycisku "Przełącz pełny ekran" wideo przechodzi do trybu pełnoekranowego, ale domyślne elementy sterujące znikają. Po tym nie mogę wrócić do aplikacji - natywny przycisk powrotu Androida nie zamyka pełnego ekranu - zamiast tego zamyka całą aplikację.

Rozwiązanie, którego szukam, spowoduje, że elementy sterujące będą zawsze wyświetlane nawet w trybie pełnoekranowym; to działa na polu z tym samym kodem na iOS.

Dlatego nie chcę poświęcać czasu na opracowywanie własnych niestandardowych elementów sterujących wideo tylko dla Androida, jeśli mogę w tym pomóc! Więc proszę nie zamieszczać odpowiedzi na temat tego, jak to zrobić (dużo już dostępnych na SO i gdzie indziej).

Używam urządzenia Android notatka Meizu m2.

Dzięki!

Edycja:

Kontrole są nadal ale wykazują w drzewie DOM cień CSS jako o wielkości 0 x 0 pikseli. Nawet gdy zmieniam ich rozmiar w chrome dev narzędziach używających ważnej flagi, nie pojawiają się.

Wszelkie pomysły?

Answer 1

Jest to problem związany z systemem Flyme OS używanym przez urządzenia Meizu. Ponieważ elementy sterujące są dostępne i niewidoczne, należy to rozwiązać przez uśrednienie systemu Flyme.

Proszę zaktualizować system Flyme, aby rozwiązać ten problem, ponieważ starsze wersje Flyme wydają się mieć pewne problemy z trybem pełnoekranowym. Mam nadzieję, że to pomoże. Pozdrawiam

Answer 2

Ustaw wartości, które następnie pozwalają wyjść z trybu pełnoekranowego.

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

dodać te dwie linie ..

document.mozFullScreen = true; 

document.webkitFullScreen = true; 

jeśli chcesz coś lepszego

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 3

Jak o tym w swoim kodzie nie wymienione kontrole mogą być w pełni atrybut może to spowodować problem.

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