将鼠标悬停在链接上时播放适当的声音

Question

上下文：这是一个 Youtube API javascript 和 iframe，当您将鼠标悬停在链接上时播放 youtube 链接的声音。链接已输入到表格中，以便您知道。

问题：问题在于，当我将鼠标悬停在输入到表格中的链接上时，即说我在表格中放置了多个链接（每个链接都连接到不同的声音），但是当我将鼠标悬停在每个链接上时，它们只会播放声音表中的第一个链接；表中的其他链接不播放相应的声音。有人可以帮我修改下面的代码来解决这个问题吗？

HTML（Iframe 的 src 被定制为播放该特定链接）：

<div class="clickme">
    <iframe id="existing-iframe-example" width="300" height="200" allow="autoplay"
    src="https://www.youtube.com/embed/{{-list[1]-}}?autoplay=1&mute=0&enablejsapi=1"
    frameborder="0" style="display: none">                                   
    </iframe>
</div>

Javascript（Youtube API）：

<script type="text/javascript">
        var tag = document.createElement('script');
        tag.id = 'iframe-demo';
        tag.src = 'https://www.youtube.com/iframe_api';
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player1;

        function onYouTubeIframeAPIReady() {
            player1 = new YT.Player('existing-iframe-example', {
                playerVars: { 'autoplay': 1, 'controls': 0 },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }
        function onPlayerReady(event) {
            document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00';
            event.target.playVideo();
        }



        function onPlayerStateChange(event) {
            //changeBorderColor(event.data);
            if (event.data == YT.PlayerState.ENDED) {
                //var myFetchedNextVideoId = document.getElementById('clickme');
                player1.seekTo(0);
                player1.playVideo();
                //player1.loadVideoById(myFetchedNextVideoId);

            }
            //if (event.data == YT.PlayerState.ENDED && !done) {
            //    player.loadVideoById(myFetchedNextVideoId);
            //}
        }


        // Shorthand for $( document ).ready()
        // A $( document ).ready() block.

             $(document).ready(function () {
                 console.log("ready!");
                 var menu = document.getElementsByClassName("clickme");
                 for (i = 0; i < menu.length; i++) {
                     var list = menu[i];

                     var link = String(list.outerHTML)
                     if (link.includes('youtube')) {

                         list.addEventListener("mouseenter", function (event) {
                            
                             console.log('mouse enter ');
                             player1.playVideo();

                         });
                         list.addEventListener("mouseleave", function (event) {
                             
                             console.log('mouse out ');
                             player1.pauseVideo();
                         });


                     }

                 }
        });




    </script>

Answer 1

问题是，您只使用var player1 初始化第一个播放器，但您需要为每个视频初始化一个播放器。你应该只在 iframe 中使用你的 id 一次，我建议你使用 youtube-video-id 作为 id，但你可以选择任何你想要的。给你的 iframe 一个类名，例如videoPlayer 然后你就可以初始化你所有的播放器了：

function createVideoElement(videoContainer) {
    const videoID = $(videoContainer).data('youtube-id');
    new YT.Player($(videoContainer).attr('id'), {
        videoId: videoID,
        playerVars: { 'autoplay': 1, 'controls': 0 },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
    });
}

window.onYouTubeIframeAPIReady = function () {
    $('.videoPlayer').each(function(index, videoContainer) {
        createVideoElement(videoContainer);
    });
}

您的 iframe 的 HTML 可能如下所示，JavaScript 应填写 iframe 代码：

<div class="videoPlayer" data-youtube-id={{-list[1]-}}></div>