我要执行的操作：创建一个项目列表,其中包含一个链接,可在每个项目旁边播放来自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视频上播放音频的替代解决方案将是不错的选择.

谢谢！

解决方法:

如果需要,您可以像这样复制并粘贴代码

https://jsfiddle.net/8wkjqf3m/

并且可以正常工作,我不确定您是否在执行此操作时遇到问题,或者您的问题是否在其他地方.当然,它看起来很草率,应该重新编写代码,这样您就不必为每个视频都对每个函数进行硬编码.

我试图动态地做所有事情,但失败了.我不确定是否可以动态创建一个为您拥有的每个视频ID创建“ new 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的数组,然后使用初始化所有divs数据视频属性

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

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

祝你好运,让我知道我是否在正确的区域,或者那不是你想要的