android上滑控件消失,HTML5視頻控件在android設備上以全屏模式消失

I'm developing a cross platform app using cordova with an angular material front end.

我正在開發一個跨平台應用程序，使用cordova和角材料前端。

I use HTML5 video tags in a list of md-cards to play videos with external urls. When inline the videos play correctly, and display the native controls as expected.

我使用HTML5的視頻標簽在一張md-cards列表中播放帶有外部url的視頻。當內聯視頻正確播放時，按預期顯示本機控件。

controls poster="{{$ctrl.project.video.thumbnail_url}}">

Your browser does not support the video tag.

However when I click the "toggle full-screen" button the video does go to full-screen, but the default controls disappear. I cannot get back to the app after this - the native android back button does not close the full screen - instead it closes the whole app.

然而，當我點擊“切換全屏”按鈕時，視頻確實進入全屏，但默認控件消失了。在這之后，我無法回到應用程序——原生的android后退按鈕沒有關閉全屏——相反，它關閉了整個應用程序。

The solution I am looking for will make the controls always appear even in full screen mode; this works out the box running the same code on iOS.

我正在尋找的解決方案將使控制始終出現在全屏模式;這可以在iOS上運行相同的代碼。

Therefore I do not want to spend time developing my own custom video controls just for android, if I can help it! So please do not post answers about how to do that (plenty already available on SO and elsewhere).

因此，如果我能幫上忙的話，我不想花時間為android開發我自己的自定義視頻控件!因此，請不要發布關於如何做到這一點的答案(在So和其他地方已經有很多可用的答案)。

I am using a Meizu m2 note android device.

我使用的是魅族m2 note android設備。

Thanks!

謝謝!

EDIT:

編輯:

The controls are still there but are showing up in the shadow DOM tree in css as being of size 0 x 0px. Even when I change their size in chrome dev tools using the !important flag, they do not show up.

控件仍然存在，但在css中的影子DOM樹中顯示為大小為0 x 0px。甚至當我在chrome開發工具中使用!important標志改變它們的大小時，它們也不會出現。

Any ideas?

什么好主意嗎?

3 个解决方案

#1

1

This is an issue with Flyme OS which is used by Meizu devices. Since the controls are available and not visible, this should be resolved by ugrading the Flyme OS.

這是魅族設備使用的Flyme OS的一個問題。由於控制是可用的，不可見的，這應該通過改進Flyme OS來解決。

Please update Flyme OS to resolve this as the older versions of Flyme seems to have quiet some problems with fullscreen video mode. Hope it helps. Cheers

請更新Flyme OS來解決這個問題，因為Flyme的舊版本在全屏視頻模式上似乎存在一些問題。希望它可以幫助。干杯

#2

0

set the values which then allow to exit fullscreen.

設置允許退出全屏的值。

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

add these two lines ..

加上這兩行。

document.mozFullScreen = true;

document.webkitFullScreen = true;

if you want something better

如果你想要更好的東西

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

}

}

});

#3

0

How about this in your code your not mentioned controls attribute fully may be that could cause the problem

如何在你的代碼中你沒有提到的控件屬性可能會引起問題

Toggle

var video = document.getElementById("myvideo");

function toggleControls() {

if (video.hasAttribute("controls")) {

video.removeAttribute("controls")

} else {

video.setAttribute("controls","controls")

}

}