如何在 Angular 中自动播放 youtube 组件？

Question

我正在将 Angular 11 与 Angular Youtube 组件一起使用，但我只是不知道如何在显示播放器时自动播放它而无需手动播放 请问有人可以帮助我吗？

     <youtube-player  
        [videoId]="'wZti8QKBWPo'" 
        [playerVars]="{controls: 0, mute: 1, autoplay: 1}"
        (ready)="onReady($event)"
        [startSeconds]="30"
        [width]="width"
        [height]="height">
    </youtube-player>

当我将额外的配置[playersVars]传递给播放器组件时，唯一有效的属性是controls属性，其余的什么都没有，我尝试从ts文件绑定而不是在html文件中传递对象文字，然后静音属性也沿着控件工作，

Answer 1

我再次检查了一个示例，它有效。它不起作用的原因之一是

startSeconds

属性。不知何故，当我们添加此属性时，它会停止自动播放视频。但没有它，它也能正常工作。

import { Component, OnInit } from '@angular/core';

@Component({
  template: `
    <youtube-player
      [playerVars]="playerConfig"
      [width]=640
      [height]=320
      [videoId]="videoId"
      (ready)="onReady($event)"
    ></youtube-player>
  `,
  selector: 'app-video'
})
export class VideoComponent implements OnInit {
  playerConfig = {
    controls: 0,
    mute: 1,
    autoplay: 1
  };
  videoId = 'XqZsoesa55w';
  ngOnInit() {
    const tag = document.createElement('script');

    tag.src = 'https://www.youtube.com/iframe_api';
    document.body.appendChild(tag);
  }

  onReady(e): void {
    console.log(e, 'its ready')
  }
}

这是一个应用程序的工作示例。

Answer 2

使用 Angular v16，我在 YouTube 播放器中添加了：

(stateChange)="OnStageChange($event)"
(ready)="youtubeReady( $event)"

打字稿代码：

 youtubeReady(e:any) {
      console.log( "e.target.videoTitle=", e.target.videoTitle)
      e.target.playVideo();
    }

当歌曲结束时（code=0），设置一个新的videoId并在code=5时播放视频：

OnStageChange(e:any) {
      console.log( e )
      console.log( "OnStageChange: data=", e.data, e.target.videoTitle )
      switch( e.data ) {
        case -1:
          console.log("code -1")
          break;
        case 0:
          console.log("End of Song")
          this.videoId = "h2x0JqCWXfs"
          e.target.playVideo() ;
          break;
        case 1:
          console.log("Code 1")
          break;
        case 3:
          console.log("Code 3")
          break;
        case 5:
          console.log("code 5, start next video: ", e.target.videoTitle)
          e.target.playVideo();
          break;
        default: {
          console.error( "OnStageChange for youtube: unkown data: ", e.data)
          break;
        }
      }