使用 video.js 显示 Youtube 视频（youtube 插件问题？）答案

【问题标题】：Displaying Youtube Videos with video.js (youtube-plugin problem?)使用 video.js 显示 Youtube 视频（youtube 插件问题？）
【发布时间】：2020-06-09 20:45:41
【问题描述】：

我尝试制作一个 youtube 混音器。所以我可以同时显示多个视频并以不同的速度循环播放部分。似乎通过 video.js 包含视频的方法是最简单的，因为我可以使用 https://github.com/phhu/videojs-abloop 进行循环。要将 youtube 与 video.js 一起使用，我依赖：https://github.com/videojs/videojs-youtube。

在我进一步了解之前，我播放 youtube 视频失败了。即使是文档示例中的那个也不适合我。

你可以在这里查看我的测试网站：https://frill-thankful-hurricane.glitch.me/test html的代码是：

<!DOCTYPE html>
<html>
  <head> </head>
  <body>
    <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>
  </body>
</html>

而且 package.json 有：

  },
  "dependencies": {
    "express": "^4.17.1",
    "sqlite3": "^4.1.1",
    "video.js": "^7.8.2",
    "videojs-youtube": "^2.6.1",
    "videojs-abloop": "^1.1.2"
  },
  "engines": {
    "node": "12.x"
  },

我通过 stackoverflow 进行了搜索，但大多数帖子都非常旧，并且标记为正确的示例对我不起作用。也许我跳过了一些重要的事情？

【问题讨论】：

标签： javascript youtube video.js

【解决方案1】：

他们更新了传递的src 概念。这是一个有效的视频网址。

<video id="speak_video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
    data-setup='{"techOrder":["youtube"], "sources": [{ "type": "video/youtube", "src": "http://www.youtube.com/watch?v=xYemnKEKx0c" }]}'>
</video>

您可以通过以下两步在此处测试工作演示：

转到https://embed.plnkr.co/plunk/GJ43fE
转到index.html 文件并将上面的<video> 代码添加到</body> 标记之前，您将看到YouTube 视频。

【讨论】：