使用 video.js 包装器启用 YouTube 播放

好的，所以我正在尝试使用 video.js 项目包装/换肤 YouTube 视频，以实现与我网站上其他视频类似的外观和感觉。现在根据您可以看到的文档here https://github.com/videojs/video.js/blob/master/docs/tech.md#youtube-technology因此，我设置了一个标头，可以正确播放 example_video_1 的视频标签并为其换肤，如入门部分 https://github.com/videojs/video.js/blob/master/docs/setup.md然而，当尝试使用带有 youtube 源的视频时，我有一个 html 元素：

 <video id="example_video_1" class="video-js vjs-default-skin"
   controls preload="auto" width="640" height="264"
  poster="http://ec2-54-227-116-247.compute-1.amazonaws.com/models/site-     templates/images/cover_img/ted_cover.jpg"
  data-setup='{"techOrder": ["youtube"]}'>
  <source src="http://www.youtube.com/watch?v=xYemnKEKx0c" type='video/youtube' />
  </video>

现在显示了我的封面图像，但没有显示播放按钮。我在文档中遗漏了什么吗？或者我是否误解了文档，而 youtube 只是一个示例，我仍然需要实际编写一个 API 包装器才能完成这项工作，而他们刚刚将其作为示例展示了如何操作？任何帮助或见解将不胜感激！

这个问题也被问到了这里6个月 https://stackoverflow.com/questions/14194379/video-js-youtube-video?rq=1在 video-js v4 发布之前

您可能会在 javascript 控制台中生成错误，因为 videojs 默认情况下不知道如何播放 YouTube 视频。

该文档对我来说看起来不正确。我在 github 存储库（文档之外）中没有看到任何知道如何播放 YouTube 视频的实际代码。

听起来您链接到的问题中引用的拉取请求也已关闭，并建议将其作为插件来完成 - 其中似乎已经发生了 https://github.com/videojs/video.js/wiki/Plugins.

使用该插件非常简单。除了包含 video.js 脚本之外，您还需要包含以下插件脚本https://github.com/eXon/videojs-youtube https://github.com/eXon/videojs-youtube:

<script src="js/video.js"></script>
<script src="js/media.youtube.js"></script>

您必须对视频标签进行的唯一更改是将 src 包含在数据设置 json 中：

<video id="example_video_1" class="video-js vjs-default-skin" controls 
       preload="auto" width="640" height="264"
       poster="http://ec2-54-227-116-247.compute-1.amazonaws.com/models/site-templates/images/cover_img/ted_cover.jpg" 
       data-setup='{"techOrder":["youtube"], "src":"http://www.youtube.com/watch?v=xYemnKEKx0c"}'>
</video>

这是一个工作示例 http://jsfiddle.net/EAD5q/1/。请注意，此示例引用了 rawgithub 插件 js，因此您当然需要下载本地副本。

我还注意到海报无法正确加载。这是插件中的一个错误，但如果您有兴趣，可以立即找到解决方法。看到这个example http://jsfiddle.net/82yFj/