编程Phoenix YouTube视频错误 - 视频无法播放

Question

我正在编写Phoenix编程书，我在YouTube视频播放器上收到错误。

这是我的web/static/js/player.js文件：

let Player = {
  player: null,

  init(domId, playerId, onReady){
    window.onYouTubeIframeAPIReady = () => {
      this.onIframeReady(domId, playerId, onReady)
    }
    let youtubeScriptTag = document.createElement("script")
    youtubeScriptTag.src = "//www.youtube.com/iframe_api"
    document.head.appendChild(youtubeScriptTag)
  },

  onIframeReady(domId, playerId, onReady){
    this.player = new YT.Player(domId, {
      height: "360",
      width: "420",
      videoId: playerId,
      events: {
        "onReady": (event => onReady(event) ),
        "onStateChange": (event => this.onPlayerStateChange(event) )
      }
    })
  },

  onPlayerStateChange(event){ },
  getCurrentTime(){ return Math.floor(this.player.getCurrentTime() * 1000) },
    seekTo(millsec){ return this.player.seekTo(millsec / 1000) }
}
export default Player

我正在web/static/js/app.js中将其导入：

import Player from "./player"
let video = document.getElementById("video")

if(video) {
  Player.init(video.id, video.getAttribute("data-player-id"), () => {
    console.log("player ready!")
  })
}

我看到“玩家准备好了！” javascript控制台中的消息;但是，视频无法播放。他们给我一个看起来像这样的错误：

如何解决这个问题以便播放视频？

Answer 1

错误实际上来自我的观看视图 - 我在<id>之前忘记了正则表达式中的问号，因此未正确设置player_id：

defmodule Rumbl.WatchView do
  use Rumbl.Web, :view

  def player_id(video) do
    ~r{^.*(?:youtu\.be/|\w+/|v=)(?<id>[^#&?]*)}
    |> Regex.named_captures(video.url)
    |> get_in(["id"])
  end
end