如何使用 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”等，我看不出动态执行所有这些的意义......

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

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++;
    });
}