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

Question

我正在阅读《Programming 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

这个错误实际上是来 self 的 watch View - 我忘记了 <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