从 RSS 提要项中获取视频的链接

Question

我是 Web 开发的新手，这是我的第一个 Chrome 扩展程序。这是我获取和解析 RSS 提要的脚本：

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

问题是这样的：

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

我们的想法是让视频播放，尽管它​​位于.mp4。
以下是我正在解析的提要：http://feeds.podtrac.com/tTKj5t05olM$

注意我已允许我的 chrome 清单中的所有 URL

Answer 1

在将项目添加到数组之前尝试添加以下条件：

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

[attribute$="value"] 是以选择器结尾的 jQuery 属性。它将选择具有指定属性且值以给定字符串结尾的元素。

代码：

$(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 2

我认为您的 mp4 文件格式不正确，无法在 HTML5 视频标签中播放。

当我在 Firefox 中打开 http://media.tqaweekly.com/video/tqa-se4ep29.mp4 时，我收到一条错误消息，指出视频已损坏。在 Chrome 中，我有音频但没有视频。

我为另一个堆垛机here 解决了这个问题。我认为是类似的东西。

之后，您需要在 HTML5 视频标签中显示视频。但我想你不需要帮助:)

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

Answer 3

问题就在这里：

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

必须是：

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