Azhar Azhar - 3 months ago 4
Javascript Question

how do i find all the links of videos and add option of "Play Video" or "Download Video"

I'm using php in order to crawl and generate video links from the internet and now i want to add option of "Play Video" or "Download Video" when a video link is found also add a video player when play video option is selected.

for example visit this site
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>





How do i do this?

Answer

Read the TD's .n Anchor. Extract the href and get the text.
prepare an empty TD for every TR and do like (Example using ):

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

Comments