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

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视频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>