我使用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"> </td><td class="s">- </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"> </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"> </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"> </td><td class="s">2.8MB</td>
<td class="t">video</td>
</tr>
</tbody>
</table>
&#13;
我该怎么做?
答案 0 :(得分:2)
阅读道明的.n
主播。提取href
并获取文字
为每个TR准备一个空的TD,并且喜欢(使用jquery示例):
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"> </td><td class="s">- </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"> </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"> </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"> </td><td class="s">2.8MB</td>
<td class="t">video</td>
<td class="d"></td>
</tr>
</tbody>
</table>
<div id="videoPopup"></div>
&#13;