Question

我正在建立一个网站，我有14首歌曲我想在循环中播放作为播放列表（我从网上的网址获取这些歌曲）。此外，还有一个列表，其中列出了在单击合适的歌曲名称时要在歌曲之间替换的歌曲名称。如果互联网连接在页面已经加载后突然失败，我希望能够播放这些歌曲..所以我尝试使用合适的网址构建14个视频隐藏元素而不播放它们，当用户点击一首歌曲时我的名字我开始播放隐藏的视频元素。

问题 - 如果按顺序点击歌曲它们可以正确播放，但是如果我点击以后的歌曲，例如第7首歌曲namr，第1首歌曲第一次播放后歌曲不在播放..我需要点击第二个名字（第二个将被播放），然后是第三个，依此类推，直到7，然后才播放..好像不是所有的14首歌都是在页面加载时加载，并播放它们必须按顺序...我该怎么做才能解决这个问题？解决这个奇怪案件的人是国王/王后！非常感谢:)！

开头的加载功能：

function loadAllVideos(theFiles) {
    console.log("loadAllVideos:");
    for (var i = 0; i < theFiles.length; i++) {
        video = document.createElement("video");
        // window.URL.createObjectURL(selectedFiles[currentSong++]);
        console.log("video_" + theFiles[i].name);
        var fileName = theFiles[i].name.split('.')[FIRST];
        video.setAttribute("id", "video_" + fileName);
        video.style.visibility = "hidden";
        video.src = theFiles[i]._url;
        video.onended = function(e) {
            var playlistName = getPlaylistName();
            findNextSongToPlay(playlistName, playNextSong);
        };
        var wrapper = document.getElementById("wrapper");
        wrapper.appendChild(video);

        mapUrlIndex[theFiles[i]._url] = i;
        var liElement = document.createElement("li");
        liElement.setAttribute("id", "songLi" + i);
        var textElement = document.createTextNode(fileName);
        var aElement = document.createElement("a");
        aElement.setAttribute("href", "#");
        aElement.setAttribute("id", "aLi" + i);
        aElement.appendChild(textElement);
        liElement.appendChild(aElement);
        var songsList = document.getElementById("buttons");
        liElement.setAttribute("onclick", "updateCurrentSongFromList(" + i
                + ")");
        if (i == 0) {
            liElement.setAttribute("style", "background-color: #33B5E5;");
        }
        songsList.appendChild(liElement);
    }
    lastPlayingSongLi = $("#songLi" + 0);
}

单击歌曲名称时的播放功能：

function updateCurrentSongFromList(i) {
    theIndex = i;
    if (lastPlayingSongLi != null)
        lastPlayingSongLi.css("background-color", LI_BG_COLOR);
    if (lastBirthdayPlayingSongLi != null)
        lastBirthdayPlayingSongLi.css("background-color", LI_BG_COLOR);
    if (currentVideo != null) {
        currentVideo.pause();
        currentVideo.currentTime = 0;
    }
    $("#songLi" + i).css("background-color", LI_SELECTED_BG_COLOR);
    // $('#buttons').scrollTo("#songLi" + i);
    lastPlayingSongLi = $("#songLi" + i);
    var songName = $("#aLi" + i).text();
    var songTitle = document.getElementById("currentSong");
    $("#currentSong").text("");
    songTitle.appendChild(document.createTextNode("Current Song:"));
    songTitle.appendChild(document.createElement("br"));
    songTitle.appendChild(document.createTextNode(songName));
    // $("#currentSong").text("Current Song: \\n" + songName);
    var video = document.getElementById("video_" + songName);
    currentVideo = video;
    currentVideo.play();
    $("#playImage").attr("src", "images/pause.jpg");
    updateCurrentlyPlaying(getPlaylistName(), songName,
            sendCurrentSongPushNotification);
    resetVotes(songName, getPlaylistName());
}

Answer 1

问题在于浏览器处理多个媒体元素的方式......它限制了预缓冲的数量，以避免使用用户永远不需要的带宽。你可能最好有一个媒体元素，并在选择新视频时更改源，或者你需要预先将它们加载到blob中并在选择时设置源

播放视频元素不能正常工作

1 个答案: