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

【问题标题】：Programming Phoenix YouTube Video Error - Videos Won't Play编程 Phoenix YouTube 视频错误 - 视频无法播放
【发布时间】：2016-03-04 20:29:20
【问题描述】：

我正在阅读 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 控制台中的消息；但是，视频不会播放。他们给了我一个看起来像这样的错误：

我该如何解决这个问题才能播放视频？

【问题讨论】：

标签： javascript youtube elixir youtube-javascript-api phoenix-framework

【解决方案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

【讨论】：