Question

I found the answer in another Stack Overflow Q when I did a slightly different search. The key line of code is this:

var videoFile = $(this).find('.vid_file').text();

with ‘this’ referencing each videoLink div, then it finds the vid_file div within videoLink, and reads the text. Hopefully that will help someone else!

I am creating a dynamic video gallery with HTML, XML and JQuery. After reading in the XML file, I output an HTML string that creates a dynamic div for each video (.videoLink). Within that div are child divs that hold the video caption, a path for the background .jpg, and the name of the video file (.vid_file). All of that is working correctly. But I am having problems extracting the unique value of each .vid_file (I’ve got 6 test videos in my dbase). Here is the code I’m using:

$('.videoLink').click(function(e){
    e.preventDefault();
    $('vid_file').each(function (){
    var videoFile = $(this).text();

    var videoCode = '<video controls autoplay autobuffer>' +
        '<source src="video/'+videoFile+'.ogv" type="video/ogg" />' +
        '<source src="video/'+videoFile+'.mp4" type="video/mp4" />' +
        '</video>';

    $('#videoPlayer').html(videoCode);

etc. (I’m using fancybox to display the videos — that is working). What happens with the above code is that when you click on one, they all play. I realize that is exactly what i’m asking it to do with this code, but have tried many variations (nesting the click event inside an .each method; vice versa, and more) and getting them to play at all is the closest I’ve been to making it work. So I think I’m nearly there. But not quite. What am I missing? Thanks in advance for your help. — Cheryl

Answer 1

It seems you are missing the dot in the selector. So use the following.

$('.vid_file').each(function (){
    var videoFile = $(this).text();

    var videoCode = '<video controls autoplay autobuffer>' +
        '<source src="video/'+videoFile+'.ogv" type="video/ogg" />' +
        '<source src="video/'+videoFile+'.mp4" type="video/mp4" />' +
        '</video>';

    $('#videoPlayer').html(videoCode);
}