移动注意事项

Question

我已经使用Youtube iframe播放器API来显示播放列表并使用youtube id播放youtube视频，这些视频是使用angular＆lt; 4构建的，在桌面浏览器中播放播放列表时一切都很完美但是如果我打开我的网络应用程序移动浏览器我能够播放音乐和观看视频，但是一旦我最小化我的移动浏览器视频就会暂停，同样在锁定移动设备时也是如此。如何通过最小化和锁定屏幕在后台播放视频来继续听音乐？我已经配置了我的iframe播放器API，如下所示

  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,
   }
 }

有什么办法可以在移动浏览器中打开时在web应用程序的背景下播放YouTube视频。任何建议都非常感谢。

Answer 1

移动注意事项

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

“警告：为防止在以下位置通过蜂窝网络进行未经请求的下载：用户的费用，嵌入式媒体无法自动播放 iOS上的Safari –用户始终启动播放。”

由于此限制，因此功能和参数（例如自动播放， playVideo（），loadVideoById（）不适用于所有移动环境。

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

使用youtube iframe播放器API进行背景视频播放

1 个答案:

移动注意事项