使用 youtube iframe 播放器 API 播放背景视频答案

【问题标题】：background video play using youtube iframe player API使用 youtube iframe 播放器 API 播放背景视频
【发布时间】：2018-10-12 09:47:03
【问题描述】：

我已经使用 Youtube iframe 播放器 API 在我的使用 angular

  if (window['onYouTubeIframeAPIReady']) {
    return this.initYoutubePlayer(videoId);
 }

 /**
  * Initiate youtube iframe player.
  */
 private initYoutubePlayer(videoId: string, resolve) {
   this.youtube = new YT.Player('youtube-player', {
    videoId: videoId,
    playerVars: this.getPlayerVars(),
    events: {
        onReady: () => this.onPlayerReady(resolve),
        onError: this.tryToPlayFallbackVideos.bind(this),
        onStateChange: this.onYoutubePlayerStateChange.bind(this)
        }
    });
 }

 /**
  * Handle youtube player state changes.
  */
 private onYoutubePlayerStateChange(e: YT.OnStateChangeEvent) {
    switch (e.data) {
    case YT.PlayerState.ENDED:
        this.state.firePlaybackEnded();
        this.setState('playing', false);
        break;
    case YT.PlayerState.PLAYING:
        this.numberOfTracksSkipped = 0;
        this.setState('playing', true);
        break;
    case YT.PlayerState.PAUSED:
        this.setState('playing', false);
        break;
   }
 }

  /**
  * Get youtube player vars.
  */
 private getPlayerVars(): YT.PlayerVars {
    return {
    autoplay: 0,
    rel: 0,
    showinfo: 0,
    disablekb: 1,
    fs: 0,
    controls: 0,
    modestbranding: 1,
    iv_load_policy: 3,
    playsinline: 1,
   }
 }

当我在移动浏览器中打开时，有什么方法可以在网络应用程序的背景中播放 youtube 视频。任何建议都非常感谢。

【问题讨论】：

标签： javascript angular youtube youtube-iframe-api mobile-browser

【解决方案1】：

移动注意事项

自动播放和脚本播放 HTML5 元素，仅在某些移动浏览器（例如 Chrome 和 Safari）中如果播放是由用户交互启动的，则允许播放（例如点击播放器）。这是苹果公司的摘录文档：

“警告：为了防止在蜂窝网络上未经请求的下载用户的费用，嵌入式媒体不能自动播放 iOS 上的 Safari — 用户总是启动播放。”

由于这个限制，自动播放等功能和参数， playVideo()、loadVideoById() 不适用于所有移动环境。

来源：https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations

【讨论】：