Question

更新：通过下面@Manoj的代码和其他一些来源，我现在能够将YouTube播放器加载到基于Youtube iframe api的网络视图中。但是问题仍然是：当视频本身开始播放时，如何让我的应用识别？（在视频加载之后和任何广告播放之后）。

关键代码被“捕获”在Web视图中。

有一个nativescript-webview接口插件，旨在让您从webview获取信息。如果这是这里所需要的，那么当视频本身开始播放时，使用该插件注册的正确代码是什么？

该插件回购中的示例似乎非常具体，与我在此想到的有所不同。

原始问题：

我有一个使用iOS和Angular的Nativescript应用。我想在应用程序中播放youtube视频，并且希望能够控制播放。因此，我想做一些事情，例如以编程方式自动播放并在视频实际播放时进行注册。

我该怎么做？

更多详细信息：

有一个nativescript-youtubeplayer插件，但我不能在这里使用，因为它需要api键和其他一些原因。

我能够使用以下代码将基本iframe嵌入到WebView中：

<WebView (loaded)="onWebViewLoaded($event)" requiresUserActionForMediaPlayback="false" [src]="urlSource"></WebView>

和在ts中：

 public urlSource= '<iframe src="https://www.youtube.com/embed/ZwO3PG-c5Cs?playsinline=1&autoplay=1&fs=0&controls=1&enablejsapi=1"></iframe>'

这将加载视频。但是它没有普通的youtube控件（例如视频上没有大的暂停按钮），也许是被网络视图覆盖了。更重要的是，它不会不能自动播放，并且它不会让我无法通过编程方式访问iframe信息，因此，例如，我无法确定何时视频实际上是在播放还是在暂停时播放。

Youtube Iframe Player API是为此目的而制作的，但是如何将其与Nativescript一起使用？它似乎需要以我以前从未见过的Nativescript方式进行dom操作。

例如，其基本代码为：

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: 'M7lc1UVf-VE',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

但是，毫不奇怪，这会带来错误，例如“找不到名称YT”。

那么，如何将youtube视频嵌入到带有iframe的Nativescript中，并像使用Web应用程序一样控制它呢？

Answer 1

您可以在WebView中使用YouTubeIframeAPI，创建一个单独的可以保存脚本的本地html文件。

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_HOST} ^(www\.)?qaz\.com [NC]
RewriteRule (.*) https://wsx.com/home-page/ [R=301,L]

Playground Sample

注意：您甚至可以在查询字符串中传递videoId或任何其他参数，然后在html文件中进行解析和使用。

Answer 2

我已经有一段时间没有对此进行研究了，但是我认为跟进以显示在我的情况下最有效的方法是有帮助的。希望这里有一些代码可以帮助其他人。

对我来说，关键的见解是将基本的YouTube代码（他们为您提供了baner）放入TS组件的变量中：

因此，首先，我的TS组件将这样的Youtube代码放入：

exportClass YoutubeComponent implements OnInit {
        public youtubeVideoId = [ID OF VIDEO I WANT TO PLAY]
        public youtubeCode = 
          `
           <!DOCTYPE html>
          <html>
          <body>
             <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
               <iframe id="player"
                width="90%" height="375"
                src="https://www.youtube.com/embed/` + this.youtubeVideoId + `?enablejsapi=1&playsinline=1&autoplay=1&fs=0&controls=1" 
            frameborder="0"
                 ></iframe>
           <script>
           /**
           * WebViewInterface class to handle communication between webView and Android/iOS.
          */
         var NSWebViewinterface = (function () {
               function NSWebViewinterface() {
         
          [PUT IN THE REST OF THE WHOLE YOUTUBE CODE IN THIS VARIABLE]
             ...   
        `

然后在html中

<WebView row="0" src="{{youtubeCode}}" #webView></WebView>

然后在与上述相同的TS组件中与Web视图进行交互：

 @ViewChild('webView') webView: ElementRef;

  onWebViewLoaded(args) {
     let webView: WebView = this.webView.nativeElement;
     this.oWebViewInterface = new WebViewInterface(webView); 
     this.nextFunction()
   }

  nextFunction {
     this.oWebViewInterface.on('onPlayerStateChange, (data) =>{
       if (data.state === 5){ //video cued
         console.log('video is cued up')
       }
    })
  }

要将YouTube Iframe API与Nativescript一起使用？

2 个答案: