Question

好的，我正在尝试使用video.js项目包装/皮肤，YouTube视频，以便为我网站上的其他视频提供类似的外观。现在根据你可以看到的文档here所以我设置了一个标题，可以像getting started section一样正确播放和覆盖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包装器才能使这个工作，他们只是将这个作为一个例子展示了如何操作？任何帮助或见解将不胜感激！

在发布video-js v4之前{} {3}}也提出过这个问题

Answer 1

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

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

这听起来像你关联的问题中引用的拉取请求已被关闭，建议将其作为插件执行 - appears to have happened。

使用该插件非常简单。除了包含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>

这是一个working example。请注意，此示例引用了rawgithub插件js，因此您当然希望下载本地副本。

我还注意到海报没有正确加载。这是插件中的一个错误，但如果您有兴趣，可以立即解决。见example

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

1 个答案: