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

Question

好吧我正在尝试使用video.js项目包装/皮肤,YouTube视频,以便为我网站上的其他视频提供类似的外观.现在根据你可以在这里看到的文档,所以我有一个标题设置正确播放和皮肤example_video_1的视频标签,如在入门部分但是当尝试使用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个月前在video-js v4发布之前也曾问过这个问题

Answer 1

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

该文档对我来说不正确.我没有在知道如何播放YouTube视频的github repo(文档之外)中看到任何实际代码.

它听起来像你链接到的问题中引用的pull请求已关闭,并建议将其作为插件执行 - 这似乎已经发生了.

使用该插件非常简单.除了包含video.js脚本之外,您还将包含来自https://github.com/eXon/videojs-youtube的插件脚本:

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

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

<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>

这是一个有效的例子.请注意,此示例引用了rawgithub插件js,因此您需要下载本地副本.

我也注意到海报没有正确加载.这是插件中的一个错误,但如果您有兴趣,可以立即解决.看这个例子