2

我对 Javascript 的经验并不丰富，而且我几乎整天都在努力解决这个问题。

我正在使用 Jquery 来创建嵌入式 youtube 视频的 id 和数组：

$(function() {

            $('li').on("click",function(){
                alert($(this).attr('data-pile'));
                var pilename = $(this).attr('data-pile');
                var videoIDs = [];
                $("li[data-pile='"+pilename+"']").each(function(index){
                    videoIDs.push($(this).attr('id'));
                });
                $.each(videoIDs,function(){ 
                });
            });

        });

我需要在这个 JS 中使用数组：

<script src="//www.youtube.com/iframe_api"></script>

<script>
    /**
     * Put your video IDs in this array
     */
    var videoIDs = [

     //my array of Ids here   

    ];

    var player, currentVideoId = 0;

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    function onPlayerReady(event) {
        event.target.loadVideoById(videoIDs[currentVideoId]);
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.ENDED) {
            currentVideoId++;
            if (currentVideoId < videoIDs.length) {
                player.loadVideoById(videoIDs[currentVideoId]);
            }
        }
    }
</script>

在嵌入视频的每个 div 中，我都应用了一个与视频具有相同 ID 的 ID。我应该如何使这两个脚本工作？如果有人能指出我正确的方向，我将不胜感激。

4

2 回答 2

2

您要声明 videoIDs 数组两次，一次是在您的点击事件中，另一次是在您的第二个脚本中。

单击事件中的一个是该函数的本地事件，而另一个是全局的。Javascript 具有函数作用域，因此一旦该函数结束，点击事件 1 就会被丢弃。

如果您删除点击事件中的那个，我相信它应该可以工作。您还应该删除 $.each... 因为我认为它不会有帮助（您正在尝试制作播放列表，对吗？）。

应该注意的是，使用全局变量污染全局命名空间被认为是不好的做法。如果这是您页面上的所有代码，则可能不是问题。

于 2013-09-20T06:08:21.963 回答
1

尝试这样做：在“点击”事件之后添加一个自定义侦听器。没有检查您的阵列形成部分，使用自定义阵列进行了测试，希望您不会遇到问题。

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

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '350',
            width: '425',
        });
    }    
    $(function(){
        $(document.body).on("click",".play", function(){
            player.stopVideo();
            var pilename = $(this).attr('data-pile');
            var videoIDs = [];
            $("li[data-pile='"+pilename+"']").each(function(index){
                videoIDs.push($(this).attr('id'));
            });

            if(videoIDs.length > 0){

                currentVideoId = 0;

                player.loadVideoById(videoIDs[0]);

                function onPlayerStateChange(event) {
                    if (event.data == YT.PlayerState.ENDED) {
                        currentVideoId++;
                        if (currentVideoId < videoIDs.length) {
                            player.loadVideoById(videoIDs[currentVideoId]);
                        }
                    }
                }

                player.addEventListener("onStateChange", onPlayerStateChange)

                player.playVideo();
            }

        });
    });
</script>
于 2013-09-20T07:08:41.310 回答