时间戳

首页 > 解决方案 > 使用 video.js 显示 Youtube 视频（youtube 插件问题？）

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

问题描述

我尝试制作一个 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 进行了搜索，但大多数帖子都很旧，并且标记为正确的示例对我不起作用。也许我跳过了一些重要的事情？

标签： javascriptyoutubevideo.js

解决方案

他们更新了传球src概念。这是一个有效的视频 URL。

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

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

  1. 去https://embed.plnkr.co/plunk/GJ43fE
  2. 转到文件并在标签之前index.html添加上述代码，您将看到 youtube 视频。<video></body>

推荐阅读