将 onPause/onResume 添加到 Ionic 2 页面中的 Youtube 视频

Posted 2023-03-13

【中文标题】将 onPause/onResume 添加到 Ionic 2 页面中的 Youtube 视频

【英文标题】：Adding onPause/onResume to a Youtube video within an Ionic 2 page

【发布时间】：2017-07-10 09:39:50

【问题描述】：

我有一个小问题需要在 Ionic 2 中解决一个非常基本的演示 android 应用程序。

当主页上播放 Youtube 视频时，如果您按下电源按钮或手机进入睡眠/锁定模式，则 Youtube 视频会继续播放。此问题导致 Google 在 Play 商店中拒绝该应用，因为他们不允许在 Youtube 嵌入上发生这种情况。

所以我需要添加一些代码来在状态改变时暂停视频并在再次唤醒时恢复。

我需要添加的功能似乎称为 onPause 和 onResume，但我不确定如何以及在何处添加代码以使此功能与此自定义 Youtube 代码一起使用。

这里是 repo 中的文件，APK（仅 3mb）只是对空白 ionic 2 安装主页的更改，您可以在其中看到问题的实际情况。

Github RepoAPK in Github

【参考方案1】：

我会添加评论以补充 n00b 所说的内容，但我还没有 50 点声望点。添加到菜鸟答案并提供额外提示。请在他第一次发布时将 n00b 标记为正确答案。

import  DomSanitizer, SafeResourceUrl from '@angular/platform-browser';

export class page 
    currentVideoSource: SafeResourceUrl;
    constructor(public navCtrl: NavController, private sanitizer: DomSanitizer) 
        this.currentVideoSource = this.sanitizer.bypassSecurityTrustResourceUrl("youtubeurl");
    

现在 src 应该可以在 iframe 中使用类似于以下内容的内容

[src]="currentVideoSource";

【讨论】：

差不多了，错误消失了。但是无法加载视频。在之前的 Ionic 1 中使用 product.video 为每个产品加载视频。这是 Plunker 中的代码：plnkr.co/edit/HrZVaz34XxBc2s03Lu8G?p=catalogue

你有更多的麻烦吗？试试这个......而不是像你目前正在做的 product.video，......试试 this.currentVideoSource = this.sanitizer.bypassSecurityTrustResourceUrl(product.video);我不能肯定这是否会奏效，因为我无法对其进行测试，但值得一试。

【参考方案2】：

您应该将该 URL 添加到 Angular2 DomSanitizer 异常列表中。您看到的是 Angular2 的一项安全功能，可以防止人们在我们的应用程序中加载恶意 URL。

https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html

【讨论】：

谢谢，差不多了。只是针对视频的问题，见上文

【参考方案3】：

我会直接使用 Youtube 视频插件来避免您遇到的问题，您可以在此处查看有关如何安装它的预览视频

https://www.udemy.com/master-ionic-3-with-ionic-native-and-cordova-integrations

节点

ionic cordova add https://github.com/JonSmart/CordovaYoutubeVideoPlayer

npm install @ionic-native/youtube-video-player

APP.MODULE.TS

import YoutubeVideoPlayer from '@ionic-native/youtube-video-player'

添加到供应商列表 YoutubeVideoPlayer

HOME.TS

import YoutubeVideoPlayer from '@ionic-native/youtube-video-player'

在出口类下

constructor (private videoPlayer: YoutubeVideoPlayer ) 

playVideo(video: Video) 
    this.videoPlayer.openVideo(video.videoId)

Android 需要 API 密钥 搜索“Youtube 数据 API 概览”

config.xml（“在允许意图下”）

【参考方案4】：

来自这个blog post，

它说您可以使用 Apache Cordova 事件侦听器。

Apache Cordova 事件不需要为 IonicFramework 安装额外的插件。

要注册一个事件，我们必须在我们的 $ionicPlatform.ready() 方法中这样做。

有些听众是

resume - 当本机平台从后台拉出应用程序时触发 resume 事件。

pause - 当应用程序进入后台时触发该事件。

online - 当应用程序上线且设备连接到 Internet 时触发此事件。

offline - 当应用程序离线且设备未连接到 Internet 时触发该事件。

在你的 JS 文件中，添加

angular.module(...).run(function($ionicPlatform)
        $ionicPlatform.ready(function() 
           document.addEventListener("pause", function() 
              //Code to pause the video
           , false);
     );

有关受支持事件的完整列表，请参阅Apache Cordova official website