如何查找视频的所有链接并添加"播放视频"或"下载视频"

时间:2016-08-11 07:45:36

标签: javascript php html5 video video-streaming

我使用php来抓取并从互联网生成视频链接,现在我想添加"播放视频"或"下载视频"当找到视频链接时,还会在选择播放视频选项时添加视频播放器。

例如访问此网站 http://filemile.ga/new.php?search=arrow&view=linkfile



<table>
  <thead>
    <tr>
      <th class="n">Name</th>
      <th class="m">Last Modified</th>
      <th class="s">Size</th>
      <th class="t">Type</th>
      <th>Play/Download???</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="n">
        <a href="http://example.com">Parent Directory</a>
      </td>
      <td class="m">&nbsp;</td><td class="s">- &nbsp;</td>
      <td class="t">Directory</td>
    </tr>

    <tr>
      <td class="n">
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Big_Buck_Bunny_small.ogv</a>
      </td>
      <td class="m">&nbsp;</td><td class="s">4.5MB</td>
      <td class="t">video</td>
    </tr>
    <tr>
      <td class="n">
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">bunny.mp4</a>
      </td>
      <td class="m">&nbsp;</td><td class="s">1.8MB</td>
      <td class="t">video</td>
      <td class="d"></td>
    </tr>
    <tr>
      <td class="n">
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">bunny.webm</a>
      </td>
      <td class="m">&nbsp;</td><td class="s">2.8MB</td>
      <td class="t">video</td>
    </tr>
  </tbody>
</table>
&#13;
&#13;
&#13;

我该怎么做?

1 个答案:

答案 0 :(得分:2)

阅读道明的.n主播。提取href并获取文字 为每个TR准备一个空的TD,并且喜欢(使用示例):

&#13;
&#13;
function isVideo(uri) {
  return /\.(webm|mkv|avi|mp4|mpeg|mpg|ogv)/.test(uri);
}

$("tbody tr").each(function(){

  var $tdDownload = $(this).find(".d"),
      $tdName = $(this).find(".n"),
      $tdNameA = $tdName.find("a"),
      uri = $tdNameA.prop("href"),
      ext = uri.split(".").pop(),
      name = $tdNameA.text(),
      name2 = name.replace(/[\w\s]/ig,"");

  if(!isVideo(uri)) return; // Do nothing. Else...

  var pl = "<a class='play' href='"+ uri +"'>Play</a>",
      dl = "<a class='download' href='"+ uri +"' download='"+ name2 +"'>Download</a>";
  $tdDownload.append(pl, dl);

});


var videoPopup = document.getElementById("videoPopup");



function playVideo(event) {
  event.preventDefault();

  videoPopup.innerHTML = "";

  var src = this.getAttribute("href");
  var ext = src.split(".").pop();
  var type = "video/"+ ext.replace("ogv","ogg").replace("mkv","x-matroska");

  var video = document.createElement('video');
  var source = document.createElement('source');

  source.setAttribute("type", type);
  source.setAttribute("src", src);
  video.controls = true;
  video.appendChild(source);
  videoPopup.appendChild(video);
  video.play();

}


$("table").on("click", ".play", playVideo);
&#13;
table{
  border-collapse: collapse;
}
th{
  text-align: left;
}
th, td{
  padding: 4px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
td.d a{
  line-height:16px;
  display: block;
  font-size: 11px;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th class="n">Name</th>
      <th class="m">Last Modified</th>
      <th class="s">Size</th>
      <th class="t">Type</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="n">
        <a href="http://example.com">Parent Directory</a>
      </td>
      <td class="m">&nbsp;</td><td class="s">- &nbsp;</td>
      <td class="t">Directory</td>
      <td class="d"></td>
    </tr>

    <tr>
      <td class="n">
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Big_Buck_Bunny_small.ogv</a>
      </td>
      <td class="m">&nbsp;</td><td class="s">4.5MB</td>
      <td class="t">video</td>
      <td class="d"></td>
    </tr>
    <tr>
      <td class="n">
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">bunny.mp4</a>
      </td>
      <td class="m">&nbsp;</td><td class="s">1.8MB</td>
      <td class="t">video</td>
      <td class="d"></td>
    </tr>
    <tr>
      <td class="n">
        <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">bunny.webm</a>
      </td>
      <td class="m">&nbsp;</td><td class="s">2.8MB</td>
      <td class="t">video</td>
      <td class="d"></td>
    </tr>
  </tbody>
</table>


<div id="videoPopup"></div>
&#13;
&#13;
&#13;