使用 video.js 包装器启用 youtube 播放 [英] enabling youtube playback with video.js wrapper

问题描述

好的，所以我正在尝试 wrap/skin，一个带有 video.js 项目的 YouTube 视频，以使我网站上的其他视频具有类似的外观和感觉.现在根据你可以看到的文档 here 因此，我设置了一个标头，可以正确播放和为 example_video_1 的视频标签设置外观，如 入门部分 但是，当尝试使用带有 youtube 源的视频时，我有一个 html 元素:

Okay SO I am trying to wrap/skin, a youtube video with the video.js project to enable a similar look and feel to other video's on my site. Now according to the docs which you can see here So with that I have a header set up that properly plays and skins the video tag for the example_video_1 as in the getting started section However when trying to use a video with a youtube source I have a this html element:

 <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 包装器来完成这项工作，他们刚刚将其作为示例方法进行了展示?任何帮助或见解将不胜感激！

Now tMy cover image is displayed however no play button that shows. Am I missing something in the docs? Or have I misunderstood the docs and the youtube is just an example and I still need to actually write an API wrapper to make this work and they have just showed this as an example how-to ? any help or insight would be greatly appreciated!

这个问题也有人在 6 个月前在这里之前被问到video-js v4 发布

This question has also been asked here 6 months ago prior to the release of video-js v4

推荐答案

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

You are probably generating errors in the javascript console, as videojs doesn't know how to play youtube videos by default.

那个文档在我看来不正确.我在 github 存储库(文档之外)中没有看到任何知道如何播放 youtube 视频的实际代码.

That documentation looks incorrect to me. I don't see any actual code in the github repo (outside the docs) that knows how to play a youtube video.

听起来您链接到的问题中引用的拉取请求已被关闭，建议将其作为插件来执行 - 似乎已经发生.

It also sounds like the pull request referenced in the question you linked to got closed with the suggestion to do it as a plugin - which appears to have happened.

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

Using the plugin is pretty straight forward. In addition to including the video.js script, you'll also include the plugin script from https://github.com/eXon/videojs-youtube:

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

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

And the only change you have to make to your video tag is to include the src in the data-setup 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>

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

Here's a working example. Note that this example references the rawgithub plugin js, so you'll want to download a local copy of course.

我还注意到海报无法正确加载.这是插件中的一个错误，但如果您有兴趣，可以立即解决.请参阅此示例

I also noticed that the poster doesn't load correctly. That's a bug in the plugin, but there's an immediate workaround if you're interested. See this example

这篇关于使用 video.js 包装器启用 youtube 播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！