Fetching the link to a video from an RSS feed item

Question

I am new to web development and this is my first Chrome extension. Here is my script to fetch and parse RSS feeds :

$(document).ready(function() {
    // FETCH THE RSS FEEDS AND PARSE THEM
    $.get(rssurl, function(data) {
      var $xml = $(data);
      $xml.find("item").each(function() {
        var $this = $(this),
            item = {
                     title: $this.find("title").text(),
                     link: $this.find("link").text(),
                     description: $this.find("description").text(),
                     pubDate: $this.find("pubDate").text(),
                     url : $this.find("enclosure").attr("url"),
                     author: $this.find("author").text()
                   };

        // ADD IT TO THE ARRAY
        items.push(item);
        if(items.length == 1){
          $(".title").html(item.title);
          $(".description").html(item.url);
          $(".author").html(item.author);

          $(video).attr({"src" : item.url});
        }
      });// end of each()
    });// end of $.get()
});  

The problem, however is this:

url : $this.find("enclosure").attr("url"),  

The idea is to get the video to play which does not despite it being in .mp4.
Here are the feeds that I am parsing: http://feeds.podtrac.com/tTKj5t05olM$

N.B. I have allowed all URLs in my chrome manifest

Answer 1

The problem is here :

$(video).attr({"src" : item.url});  

It needs to be :

$("video").attr("src",item.url);  

Answer 2

Try to add below condition before you add item to array:

if($("enclosure[url$='.mp4']",this).length>0){}

[attribute$="value"] is jQuery attribute end with selector. It will select element that have the specified attribute with a value ending with a given string.

Code:

$(document).ready(function() {
    // FETCH THE RSS FEEDS AND PARSE THEM
    $.get(rssurl, function(data) {
      var $xml = $(data);
      $xml.find("item").each(function() {
        //if item's enclosure url attribute is in .mp4 format... then add it to the video array
        if($("enclosure[url$='.mp4']",this).length>0){
          var $this = $(this),
              item = {
                       title: $this.find("title").text(),
                       link: $this.find("link").text(),
                       description: $this.find("description").text(),
                       pubDate: $this.find("pubDate").text(),
                       url : $this.find("enclosure").attr("url"),
                       author: $this.find("author").text()
                     };

          // ADD IT TO THE ARRAY
          items.push(item);

          if(items.length == 1){
            $(".title").html(item.title);
            $(".description").html(item.url);
            $(".author").html(item.author);

            $(video).attr({"src" : item.url});
          }
        }
      });// end of each()
    });// end of $.get()
});

Answer 3

I think your mp4 files are not properly formatted to play in an HTML5 video tag.

When I open http://media.tqaweekly.com/video/tqa-se4ep29.mp4 in firefox I get an error stating the video is corrupted. In Chrome I have audio but no video.

I solved this for another stacker here. I think it is something similar.

After that you need to display the video in an HTML5 video tag. But I guess you do not need help for that :)

<video width="640" height="360" controls>
  <source src="yoursrc.mp4"  type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
</video>