javascript - 如何使用 HTML 和 javascript 仅播放 youtube 视频中的音频

Question

我正在尝试做的事情:创建一个项目列表，其中包含一个链接，用于在每个项目旁边播放 youtube 视频中的音频

我目前在做什么:我可以使用以下方法对单个项目执行此操作:

<div data-video="VIDEO_ID"  
     data-autoplay="0"         
     data-loop="1"             
     id="youtube-audio">
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>

这会创建一个播放按钮并在单个项目上完美运行，但不适用于同一页面上的多个项目，大概是因为它们都使用相同的 ID。创建不同的 ID 会导致播放器无法运行。创建两个具有相同 ID 的不同数据视频将只允许第一个播放，另一个将正确显示但按下播放时不运行。

寻找解决方案:最好是如何将现有脚本用于同一页面上的多个视频。否则，使用自定义播放按钮仅在 youtube 视频上播放音频的替代解决方案会很棒。

谢谢!

Answer 1

如果你愿意，你可以像这样复制粘贴你的代码

https://jsfiddle.net/8wkjqf3m/

它确实有效，我不确定您是在这样做时遇到了问题，还是您的问题出在其他地方。这当然看起来很草率，应该重新编写代码，这样您就不必为每个视频的每个函数都进行硬编码。

我试图动态地做所有事情但失败了。我不确定是否有可能动态创建一个函数，为您拥有的每个视频 ID 创建一个“新的 YT.player”，并且动态地创建 onPlayerReady 和 onPlayerStateChange 函数。我确定有某种方法，但我想不通。

虽然想法是为您想要的许多 youtube 播放器制作具有不同 ID 的多个“youtube-audio”div，并为 iframe 运行匹配多个“youtube-player”div。如果需要，您可以使用 javascript 生成该部分，这样您就不必用一堆重复的 html 污染您的代码。

您也可以动态生成所有 ID。

var array = ['put a video id here','put a video id here','put a video id here'];
array = array.map(function(element,index) {
  var div = document.createElement('div');
  div.setAttribute('id', 'youtube-audio-' + index);
  return {'videoId': element, 'div': div };
}

您可以只使用一个数组来保存 youtube 视频 ID，然后使用初始化所有 div 数据视频属性

document.getElementById("youtube-audio-1").dataset.video = //youtube video id

如果没有办法解决复制粘贴 x 数量的“new YT.player”和“onPlayerReady”等问题，我看不到动态执行所有这些操作的意义...

祝你好运，如果我在正确的区域或者那不是你想要的，请告诉我