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 根本没有使用此自动播放属性，尽管每次加载屏幕时视频都会播放。

videogular2 加载时不播放视频

1 个答案: