离子嵌入视频 - 退出全屏模式

Question

我有带有嵌入式 Vimeo 视频的 Ionic 应用程序。我按照官方 Vimeo documentation:

中的描述嵌入了视频

<iframe src="https://player.vimeo.com/video/...?api=1&autoplay=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

在浏览器中一切正常。

在 android 模拟器和真实设备中，视频以全屏模式播放。没关系。

当我尝试退出全屏模式时出现问题。在模拟器和某些设备上，当我按下后退按钮时，应用程序会静默关闭，而在其他设备上 - 应用程序会因错误而关闭。

我错过了什么？

如何退出播放器并导航回呈现带视频的 iframe 的页面？

谢谢！

Answer 1

我成功地使用 cordova-plugin-streaming-media 播放了视频。但是你需要一个直接的 .mp4 link 到视频文件。这是我的情况，因为我们有一个 Vimeo PRO 帐户。

在控制器中：

var options = {
    orientation: "landscape"
};

$scope.playVideo = function() {
  window.plugins.streamingMedia.playVideo("http://.../video.mp4", options);
};

Answer 2

将插件更新到最新版本并确保 <iframe /> 标签不应位于 <ion-item> 或任何离子标签内。只需将 <iframe /> 标签包裹在 <div> 标签中即可。它对我有用。这是我的代码。

<div>
  <iframe src="https://player.vimeo.com/video/301857805?api=1&loop=1&title=0&byline=0&portrait=0&autopause=1"
    frameborder="0" width="100%" height="100%" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

离子嵌入视频 - 退出全屏模式

Ionic embed video - exit fullscreen mode

embed

video

android

ionic-framework