将 videojs 与 youtube.js 一起使用答案

【问题标题】：Using videojs with youtube.js将 videojs 与 youtube.js 一起使用
【发布时间】：2016-02-04 21:39:12
【问题描述】：

我使用 videojs(http://videojs.com/) 插件和 youtube.js(https://github.com/eXon/videojs-youtube) 在自定义播放器中播放 youtube 视频。

在我从 video.js 加载 css 的头部，这是 html 正文

<div id="am-youtube-container" class="row collapse">
   <video
     id="vid1"
     class="video-js vjs-default-skin"
     controls
     autoplay
     width="640" height="264"
     data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
   >
   </video>
   <script src="http://vjs.zencdn.net/5.0/video.min.js"/>
   <script src="path to youtubejs/Youtube.js"/>
</div>

我总是收到以下错误：

VIDEOJS: ERROR: The "Youtube" tech is undefined. Skipped browser support check for that tech.
VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this video.

我无法找到解决方案。当我使用来自 youtube.js 的示例时，它可以使用完全相同的代码。

【问题讨论】：

github上有一些答案，你可以在那里查看。
感谢您的建议。 video.js 5.0 似乎引起了一些麻烦。我必须在头部添加脚本，然后添加 this.initYTPlayer();到构造函数中的 setTimeout。
嘿@Kbi，确保你有正确的路径到你的 youtube.js

标签： javascript youtube video.js

【解决方案1】：

通过 bower 获取 youtube.js：

bower install videojs-youtube

然后你将在 bower_component 文件夹中同时拥有 video.min.js 和 Youtube.min.js ，如下所示：

复制粘贴为html：

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="bower_components/video.js/dist/video-js.min.css" />
</head>
<body>

<div id="am-youtube-container" class="row collapse">
   <video
     id="vid1"
     class="video-js vjs-default-skin"
     controls
     autoplay
     width="640" height="264"
     data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
   >
   </video>
   <script src="http://vjs.zencdn.net/5.0/video.min.js"/>
   <script src="path to youtubejs/Youtube.js"/>
</div>

  <script src="bower_components/video.js/dist/video.min.js"></script>
  <script src="bower_components/videojs-youtube/dist/Youtube.min.js"></script>
</body>
</html>

所以我已经尝试过，解决方案正在替换：

   <script src="http://vjs.zencdn.net/5.0/video.min.js"/>

用这个：

  <script src="bower_components/video.js/dist/video.min.js"></script>

【讨论】：