CODEWITHSUNDEEP
jquerygoogle-chrome-extensionrsshtml5-video
An SO User
An SO User

Reputation: 24998

Fetching the link to a video from an RSS feed item

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

Upvotes: 0

Views: 637

Answers (3)

An SO User
An SO User

Reputation: 24998

The problem is here : 

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

It needs to be : 

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

Upvotes: 0

Arnaud Leyder
Arnaud Leyder

Reputation: 7002

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>

Upvotes: 1

Chickenrice
Chickenrice

Reputation: 5727

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

Upvotes: 1

Related Questions