Question

我正在开发一个使用带有角度材料前端的cordova的跨平台应用程序。

我在md-card列表中使用HTML5视频标签来播放带有外部网址的视频。内联时视频播放正确，并按预期显示本机控件。

    <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上运行相同代码的框。

因此，我不想花时间为Android开发我自己的自定义视频控件，如果我可以帮助它！因此，请不要发布关于如何做到这一点的答案（SO和其他地方已有很多）。

我使用的是魅族m2 note安卓设备。

谢谢！

编辑：

控件仍在那里但是在css的shadow DOM树中显示为大小为0 x 0px。即使我使用！important标志在chrome dev工具中更改它们的大小，它们也不会显示出来。

有什么想法吗？

Answer 1

这是魅族设备使用的Flyme OS的问题。由于控件可用且不可见，因此应通过升级Flyme OS来解决此问题。

请更新Flyme OS以解决此问题，因为旧版本的Flyme似乎在全屏视频模式下出现了一些问题。希望能帮助到你。干杯

Answer 2

设置值，然后允许退出全屏。

#this is here for documentation generation
""" 
#! [ereader]
        #this code is in Client::connect() so it's automatically done, no need
        # for user to do it
        self.reader = reader.EReader(self.conn, self.msg_queue)
        self.reader.start()   # start thread

#! [ereader]
"""

@iswrapper
#! [historicaldataend]
def historicalDataEnd(self, reqId:int, start:str, end:str):
    super().historicalDataEnd(reqId, start, end)
    print("HistoricalDataEnd ", reqId, "from", start, "to", end)
#! [historicaldataend]

添加这两行 ..

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;

Answer 3

在您的代码中，未完全提及的控件属性可能会导致问题

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

HTML5视频控件在Android设备上以全屏模式消失

3 个答案: