Question

我想在离子2中显示YouTube视频。我正在使用This youtube原生插件。但视频正在全屏播放。我希望他们调整大小并适合某些div标签。所以任何人都可以帮助我如何调整这个默认播放器的大小？

Answer 1

添加api js

const doc = (<any>window).document;
let playerApiScript = doc.createElement('script');
playerApiScript.type = 'text/javascript';
playerApiScript.src = 'https://www.youtube.com/iframe_api';
doc.body.appendChild(playerApiScript);

然后只需在随机div上进行常规youtube iframe api调用

player = new (<any>window).YT.Player(divID, {});

Answer 2

您可以在此处使用代码，根据所需尺寸在iframe中播放来自youtube的视频。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { FullvideoPage } from '../../pages/fullvideo/fullvideo';
import { VideoPlayer ,VideoOptions } from '@ionic-native/video-player';
import {SafeResourceUrl, DomSanitizer} from '@angular/platform-browser';
/**
 * Generated class for the ChaptersPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-chapters',
  templateUrl: 'chapters.html',
  providers:[VideoPlayer]
})
export class ChaptersPage {
videoOpts : VideoOptions ;
videoUrl: SafeResourceUrl;

  constructor(private domSanitizer: DomSanitizer, public navCtrl: NavController, public navParams: NavParams, private videoPlayer : VideoPlayer) {
  
  this.videoUrl = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/aw5pMBeOWM0');
  }
  }

<iframe width="100%" height="300" style="margin-left:-5% margin-right:-5%;" [src]="videoUrl" frameborder="0" allowfullscreen></iframe>

在Ionic 2中播放Youtube视频

2 个答案: