在ionic2应用程序中嵌入youtube视频

我想在我的ionic2应用程序中嵌入Youtube视频我使用了Youtube管道并导入了以下内容：

import { DomSanitizer } from '@angular/platform-browser';

youtube.ts包含以下内容

   constructor(private dom: DomSanitizer) {


    }

  transform(value, args) {
    return this.dom.bypassSecurityTrustResourceUrl(value);
}
}

我还将其导入app.module.ts，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
...
import{ YoutubePipe } from '../pipes/youtube/youtube';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ...
    YoutubePipe
  ],

import { DomSanitizer } from '@angular/platform-browser';

this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://....")

在我的.html文件中，我写了以下内容：

 <iframe width="560" Cannot GET /uri.vurl%20%7C%20youtube
height="315" src="uri.vurl | youtube" frameborder="0" allowfullscreen></iframe>

在输出屏幕上，我看到的是：

无法获取/uri.vurl%20%7C%20youtube

---

我该怎么做请帮助。

首先，您需要在.ts文件中导入DOMSanizer，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
...
import{ YoutubePipe } from '../pipes/youtube/youtube';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ...
    YoutubePipe
  ],

import { DomSanitizer } from '@angular/platform-browser';

this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://....")

接下来，在构造函数中声明一个变量

constructor(..., private sanitizer: DomSanitizer) {}

如果要显示一个已具有uri的视频，可以声明一个实例变量并按如下方式传入uri：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
...
import{ YoutubePipe } from '../pipes/youtube/youtube';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ...
    YoutubePipe
  ],

import { DomSanitizer } from '@angular/platform-browser';

this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://....")

现在，在.html文件中，执行以下操作：

<iframe [src]="videoUrl" frameborder="0" width="100%" height="155" allowfullscreen></iframe>

---

希望这有帮助。

首先，您需要在.ts文件中导入DOMSanizer，如下所示：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
...
import{ YoutubePipe } from '../pipes/youtube/youtube';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ...
    YoutubePipe
  ],

import { DomSanitizer } from '@angular/platform-browser';

this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://....")

接下来，在构造函数中声明一个变量

constructor(..., private sanitizer: DomSanitizer) {}

如果要显示一个已具有uri的视频，可以声明一个实例变量并按如下方式传入uri：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
...
import{ YoutubePipe } from '../pipes/youtube/youtube';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ...
    YoutubePipe
  ],

import { DomSanitizer } from '@angular/platform-browser';

this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl("https://....")

现在，在.html文件中，执行以下操作：

<iframe [src]="videoUrl" frameborder="0" width="100%" height="155" allowfullscreen></iframe>

---

希望这能有所帮助。

为什么你在

ifram
.html
的标签中添加
Cannot GET/uri.vurl%20%7C%20youtube

但它在控制台中不起作用，显示此错误

加载资源失败：服务器响应状态为404（未找到）

有人可以提供解决方案吗？为什么您将

无法获取/uri.vurl%20%7C%20youtube

放在

ifram

标记

.html

？尝试

src=“{uri.vurl | youtube}

无法获取/uri。vurl%20%7C%20youtube正在输出中显示，我尝试了这个

src=“{{uri.vurl | youtube}}”

但是它在控制台中不工作，它显示了这个错误

加载资源失败：服务器以404（未找到）的状态响应。

有人可以给soluion吗？