play videos elements not working smoothly

Question

I'm building a site, and I have 14 songs which I want to play as a playlist in loops(I get these songs from urls in the web). In addition there is a list with the songs names to replace between the songs when clicking the suitable songs names. If the Internet connection suddenly fail after the page already loaded I want to be able to play these songs anyway.. so I tried to build 14 video hidden elements with the suitable urls without playing them and when the user click on a song's name I'm starting to play the hidden video element.

The problem - If I click the songs by order they are played correctly, but if I click on later songs, for example the 7'th songs namr, after the 1'th song is playing for the first time the song is not being played.. I need to click on the second name (and the 2'th will be played), then the third and so on till the 7 and only then it is being played.. It seemed like not all 14 songs are being loaded when the page is loaded, and to play them it has to be by order... what can I do to fix this issue? The person who solves this weird case is a King/Queen! Thanks a lot :) !

the loading function at the beginning:

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

the playing function when a song name is clicked:

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

the problem is the way the browser handles multiple media elements... it limits the number that it will pre-buffer to avoid using bandwidth that the user never needs. you might be better off having one media element and either changing the source when a new video is selected, or if you need to prebuffer loading them into blobs and setting the source when selected