加载时videogular2不播放视频

Question

我正在使用videogular在mu网站上制作一个视频播放器。我想要的视频开始播放一旦页面加载，而不需要用户按下开始按钮。到目前为止，我尝试的任何事情都没有成功。如果我按下播放按钮，视频可以正常工作，但我不能让它在页面加载时运行。

HTML：

<vg-player (onPlayerReady)="onPlayerReady($event)" [style.width.px]="width" [style.height.px]="height">
<vg-overlay-play></vg-overlay-play>

<vg-controls vgFor="singleVideo">
    <vg-play-pause></vg-play-pause>
    <vg-mute></vg-mute>
    <vg-volume></vg-volume>
    <vg-fullscreen></vg-fullscreen>
</vg-controls>

<video #media
    [vgMedia]="media"
    src="{{videoUrl}}"
    id="singleVideo"
    type="video/mp4"
    preload="auto"
    crossorigin
    >
</video>
</vg-player>

打字脚本

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { VgAPI } from 'videogular2/compiled/core';

@Component({
  selector: 'video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})
export class VideoPlayerComponent  {

  @Input() 
  set src(src: string)
  {
    this.videoUrl = src;
    console.log("changing src: " + src);
    if (this.api != null)
    {
      this.playVideo();
    }
  }
  @Input() height: number;
  @Input() width: number;
  @Output() onFinish = new EventEmitter<any>();

  videoUrl: string;
  isPlaying: boolean;

  constructor() { }

  api: VgAPI

  onPlayerReady(api: VgAPI) {
    console.log("player ready");
    this.api = api;
    this.playVideo();

    this.api.getDefaultMedia().subscriptions.ended.subscribe(
      () => {
          this.api.getDefaultMedia().currentTime = 0;
          this.nextVideo();
      }
    );
  }

  playVideo() {
    console.log("video starting")
    this.api.currentTime = 0;
    this.api.play();
  }

  nextVideo() {
    this.onFinish.emit();
  }

}

是的，我已经调试过了，并且我确信在正确设置视频url之后会调用api.play()。

Answer 1

所以我找到了一种方法来解决这个问题，结果证明它非常简单。只需将autoplay="true“添加到视频组件即可

<video #media
    [vgMedia]="media"
    src="{{videoUrl}}"
    id="singleVideo"
    type="video/mp4"
    preload="auto"
    autoplay="true"
    crossorigin
    >

奇怪的是，我使用的videogular2 showroom rep作为引用，这个自动播放属性根本没有被使用，尽管视频在每次加载屏幕时都会播放。