Question

I am trying to add jw player to a custom cms where a user can add an mp4 file and it appears in the page as a link. But what I would like to do is detect each mp4 file on the page and have jw player wrap each mp4 file on the page and allow it to be played. Is this possible? If so is there an example of this somewhere.

Answer 1

Assuming the rendered result is some kind of list containing anchor tags like:

<a href="file1.mp4">File1</a>
<a href="file2.mp4">File2</a>
...

You can parse every single anchor tag and regex it’s href attribute content, i.e.:

$("a").each(function() {
  var href = $(this).attr('href');

  if(href.search(/*\.mp4/) != -1) {
    // this is an anchor tag where the href attribute points to an mp4 file
    // so you can replace it with some other html code

    // for instance, hide the anchor tag
    $(this).hide();

    // add some other html code after the hidden anchor tag, eg. jw player
    $(this).after('<div class="player"> <-- player code goes here --> </div>');
  }
});

It’s even easier if you can modify the template that’s being renderd the way the server side determines which links should be replaced. For instance if you can produce something like:

<a hreF="file1.mp4" class="mp4-file">File1</a>
...

You could just do

$(".mp4-file").each(function() {
  // no need to regex here

  $(this).hide();
  $(this).after('<div class="player"> <-- player code goes here --> </div>');
});

I think you get the idea…