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

我正在尝试做的事情：创建一个项目列表，其中包含在每个项目旁边播放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视频上仅播放音频的替代解决方案将非常棒

---

谢谢

如果需要，可以像这样复制粘贴代码

它是有效的，我不确定你在做这件事时是否有问题，或者你的问题是否在其他地方。当然，它看起来非常草率，代码应该重新编写，这样您就不必为每个视频硬编码每个函数

我尝试动态地做每件事，但失败了。我不确定是否可以动态创建一个函数，为您拥有的每个视频id创建一个“新的YT.player”，并动态创建onPlayerReady和onPlayerStateChange函数。我肯定有办法，但我想不出来

不过，我们的想法是为您想要的youtube播放器制作多个ID不同的“youtube音频”div，并为iframe提供匹配的多个“youtube播放器”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个“新YT.player”和“onPlayerReady”等的数字

---

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

我已经修改了第二个脚本，以便它可以按照你（或我）的要求工作

要使用它，请使用类而不是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++;
    });
}