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创建一个“new YT.player”的函数，并且还可以动态地使用onPlayerReady和onPlayerStateChange函数。我确信有一些方法，但我无法理解。

这个想法是让多个“youtube-audio”div使用不同的id，因为你想拥有多个youtube播放器并且匹配多个“youtube-player”div，以便iframe运行。你可以使用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个“新YT.player”和“onPlayerReady”等等......

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

Answer 2

我修改了第二个脚本，因此它可以像您（或我）那样工作。

要使用它，请使用类而不是ID。如下所示：

<div data-video="NQKC24th90U" data-autoplay="0" data-loop="1" class="youtube-audio"></div>
<div data-video="KK2smasHg6w" data-autoplay="0" data-loop="1" class="youtube-audio"></div>

这是脚本：

/* 
 YouTube Audio Embed 
 --------------------

 Author: Amit Agarwal
 Web: http://www.labnol.org/?p=26740

 edited by Anton Chinaev
*/

function onYouTubeIframeAPIReady()
{

    var o= function(e, t) 
    // This function switches the imgs, you may want to change it
    {
        var a=e?"IDzX9gL.png":"quyUPXN.png"; 
        //IDzX9gL is the stopped img and quyUPXN the playing img

        t.setAttribute("src","https://i.imgur.com/"+a)
        // folder or web direction the img is in. it can be "./"+a
    };

    var counter = 0;
    var bigE = document.querySelectorAll(".youtube-audio");

    bigE.forEach(function(e)
    {
        var t=document.createElement("img");

        t.setAttribute("id","youtube-icon-"+counter),
        t.style.cssText="cursor:pointer;cursor:hand",
        e.appendChild(t);

        var a=document.createElement("div");

        a.setAttribute("id","youtube-player-"+counter),
        e.appendChild(a);

        t.setAttribute("src","https://i.imgur.com/quyUPXN.png");

        e.onclick=function()
        {
            r.getPlayerState()===YT.PlayerState.PLAYING||r.getPlayerState()===YT.PlayerState.BUFFERING?(r.pauseVideo(),
            o(!1, t)):(r.playVideo(),
            o(!0, t))
        };

        var r= new YT.Player("youtube-player-"+counter,
        {

            height:"0",
            width:"0",
            videoId:e.dataset.video,
            playerVars:
            {
                autoplay:e.dataset.autoplay,loop:e.dataset.loop
            },
            events:
            {
                onReady:function(e)
                {
                    r.setPlaybackQuality("small"),
                    o(r.getPlayerState()!==YT.PlayerState.CUED, t)
                },
                onStateChange:function(e)
                {
                    e.data===YT.PlayerState.ENDED&&o(!1, t)
                }
            }
        })

        counter++;
    });
}

如何使用HTML和javascript

2 个答案: