yam天空部落-影音分享下載器(IE版)
布丁布丁吃布丁
yam天空部落-影音分享下載器(IE版)
大年初一，終於把yam天空部落影音下載器做調整了。
檔案下載(SkyDrive備份 )，請在本機電腦上用IE瀏覽器直接開啟使用吧。以下是原始碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>yam天空部落-影音分享下載器</title>
</head>
<body>
<script type="text/javascript" src="http://puddingchen.35.googlepages.com/jquery.js"></script>
<h1 style="margin:0 auto 0 auto;width:400px;"><a href="http://www.yam.com/" target="yamBlog" style="float:left;"><img src="http://blog.yam.com/i/header/logo.gif" title="yam天空部落" border="0" /></a>影音分享<br />
下載器</h1>
<div id="yam-video-download">
<style type="text/css">
#yam-video-download div.tip {
font-size: small;
color:gray;
}
#yam-video-download div.check-flag {
color:white;
background-color:#FF0000;
font-size: large;
padding: 2px 5px;
margin: 2px auto;
border: 1px solid gray;
width: 200px;
text-align:center;
display:none;
}
#yam-video-download #outputID_yvd div.content {
font-size: 1em;
}
#yam-video-download #outputID_yvd div.content span.deleter {
color:gray;
border: 1px solid gray;
/*background-color:gray;*/
font-size: smaller;
width: 12px;
display:block;
float:left;
text-align:center;
padding: 0 2px;
/*font-weight:bold;*/
font-family:Arial, Helvetica, sans-serif;
cursor:pointer;
margin-right: 0.5em;
}
#yam-video-download #outputID_yvd div.content a.downloader,
#yam-video-download #outputID_yvd div.content a.win,
#yam-video-download #outputID_yvd div.content span.title-copy {
/*border: 1px solid gray; padding: 2px; font-size: small; background-color:gray; color:white; */
text-decoration:underline;
color:#0099FF;
cursor:pointer;
margin-right: 0.5em;
}
#yam-video-download #outputID_yvd div.content a.downloader {
/*background-color:#0066FF;*/
}
#yam-video-download #outputID_yvd div.content span.title-copy {
/* font-size: smaller; color:gray; border:1px solid gray; text-decoration:none; margin: 5px;*/
}
#yam-video-download #outputID_yvd div.content span.waiting {
margin-right: 0.5em; cursor:wait;
}
#yam-video-download #outputID_yvd div.content .mouseover {
color:blue !important;
text-decoration:none !important;
}
</style>
<div class="tip">※本程式使用JavaScript跨網域取得資料的低安全性設定運作，<strong>Internet Explorer</strong>之外的瀏覽器可能無法使用。</div>
<form onsubmit="jQuery('#startParsing').click();return false;">
<script type="text/javascript">
if (!jQuery.browser.msie)
jQuery("#yam-video-download div.tip").css("color", "red");
</script>
<label for="inputID_yvd" style="display:block;">
<p>請輸入<strong style="color:#0066CC">yam天空部落-影音分享</strong>的網址</p>
</label>
<button type="button" style="font-size: 20pt;font-weight:bold;margin: 0 0.5em;height: 1.5em;" onclick="yamVideoParsing('inputID_yvd', 'outputID_yvd', 'check-flag')" id="startParsing">分析</button>
<input id="inputID_yvd" type="text" style="font-size: 20pt;width: 80%;height: 1.5em;" value="http://mymedia.blog.yam.com/m/" onfocus="this.select()"onchange="jQuery(this).nextAll('button:first').click()" />
<p style="margin:0;padding:0;color:gray;">(以<strong>http://mymedia.blog.yam.com/m/</strong>或<strong>http://mymedia.yam.com/m/</strong>開頭)</p>
<div class="check-flag" style="display:none;">網址有錯！請檢查！</div>
<div id="outputID_yvd"></div>
<!-- http://mymedia.yam.com/mp3player2.swf?pID=2195446 -->
<!--
<div class="playerMP3" style="display:none;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="450" height="120" id="main2Flash" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="" quality="high" bgcolor="#ffffff" width="450" height="120" name="mymovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
-->
<textarea class="playerMP3" style="display:none"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="450" height="120" id="main2Flash" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="" quality="high" bgcolor="#ffffff" width="450" height="120" name="mymovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></textarea>
<!-- http://mymedia.yam.com/flvplayer.swf?pID=2416365 -->
<textarea class="playerFLV" style="display:none"><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="450" height="368" id="main2Flash" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="" quality="high" bgcolor="#ffffff" width="450" height="368" name="mymovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></textarea>
<script type="text/javascript">
//jQuery("#yam-video-download button").click();
//for test
//jQuery("input#inputID_yvd").val("http://mymedia.yam.com/m/2416365");
function yamVideoParsing(inputID, outputID, checkClass)
{
var url = jQuery("#"+inputID).val();
var checkURL = new Array;
checkURL[0] = "http://mymedia.blog.yam.com/m/";
checkURL[1] = "http://mymedia.yam.com/m/";
var checkFlag = false;
for (var i = 0 ; i < checkURL.length; i++) {
var c = checkURL[i];
if (url.substr(0, c.length) == c) {
checkFlag = true; break;
}
}
if (checkFlag == false) {
jQuery("."+checkClass).css("display", "block");
return;
}
else {
jQuery("."+checkClass).css("display", "none");
}
//example: http://mymedia.yam.com/m/2425018
var mID = url.substring(url.lastIndexOf("/m/")+3,url.length);
if (jQuery.trim(mID) == "")
{
jQuery("div.check-flag").show();
return;
}
//jQuery("#"+outputID).prepend(mID);
if (jQuery("#"+outputID+" div.content[title="+mID+"]").length != 0)
return;
//建立容器
var content = jQuery("<div title='"+mID+"' class='content'></div>");
var deleter = jQuery("<span class='deleter'>×</span>")
.click(function() {
jQuery(this).parents("div.content:first").remove();
})
.hover(function() {
this.style.backgroundColor = "gray";
this.style.color = "white";
},
function() {
this.style.backgroundColor = "white";
this.style.color = "gray";
});
var downloader = jQuery("<a class='downloader'>下載</a>")
.hover(function() {
jQuery(this).addClass("mouseover");
},
function() {
jQuery(this).removeClass("mouseover");
})
.hide();
var win = jQuery("<a href='"+url+"' target='_blank' class='win'>開啟網頁</a>");
/*var preview = jQuery("div.playerMP3").clone()
.addClass("preview")
.show();
preview.children("param[name=movie]").val("http://mymedia.yam.com/mp3player2.swf?pID=" + mID);
preview.children("embed").attr("src","http://mymedia.yam.com/mp3player2.swf?pID=" + mID);
*/
/*
var previewURL = "http://mymedia.yam.com/mp3player2.swf?pID=" + mID;
var previewPlayer = jQuery("textarea.playerMP3").val();
//previewPlayer.replace('<param name="movie" value="" />', '<param name="movie" value="'+previewURL+'" />');
//previewPlayer.replace('<embed src="" quality="high"', '<embed src="'+previewURL+'" quality="high"');
previewPlayer = strReplace(previewPlayer, '<param name="movie" value="" />', '<param name="movie" value="'+previewURL+'" />');
previewPlayer = strReplace(previewPlayer, '<embed src="" quality="high"', '<embed src="'+previewURL+'" quality="high"');
alert(previewPlayer);
var preview = jQuery("<div class='preview'></div>")
.html(previewPlayer);
//preview.children("param[name=movie]").attr("value", previewURL);
//preview.children("embed").attr("src", previewURL);
*/
var preview = jQuery("<div class='preview'></div>");
var titleCopy = jQuery("<span class='title-copy'>複製標題</span>")
.click(function () {
var t = jQuery(this).nextAll("span.title").html();
window.clipboardData.setData('Text', t); }).hide();
var title = jQuery("<span class='title'>test</span>").hide();
var waiting = jQuery("<span class='waiting'>"+mID+"分析中…<img src='http://puddingchen.35.googlepages.com/ajax-loader.gif' /></span>");
content.append(deleter)
.append(waiting)
.append(win)
.append(downloader)
.append(titleCopy)
.append(title)
.append(preview);
jQuery("#"+outputID).prepend(content);
//get title
jQuery.get(url, function(data) {
//var t = jQuery(data);
//.find("h1.heading:first").length;
//alert(t.find("div").length);
var header = '<h1 class="heading">';
var footer = '</h1>';
var t = data.substring(data.indexOf(header)+header.length, data.indexOf(footer));
if (jQuery.trim(t) == "<html>\n<head>\n<titl")
{
errorFlag();
content.hide();
return;
}
jQuery("#"+outputID+" div[title="+mID+"]:first span.title:first").html(t)
.show();
jQuery("#"+outputID+" div[title="+mID+"]:first span.title-copy:first").show();
if (jQuery("#"+outputID+" div[title="+mID+"]:first :hidden").length == 0)
{
jQuery("#"+outputID+" div[title="+mID+"]:first span.waiting")
.hide();
}
});
/*
//get preview
jQuery.get(url, function(data) {
var header = '<object classid="';
var footer = '</object>';
var t = data.substring(data.indexOf(header)+header.length, data.indexOf(footer));
t = header + t + footer;
jQuery("#"+outputID+" div[title="+mID+"]:first div.preview:first").html(t).show();
});
*/
//get link
var FileURL = "http://mymedia.yam.com/api/a/?pID=" + mID;
//example: http://mymedia.yam.com/api/a/?pID=2425018
jQuery.get(FileURL, function(data) {
//var t = jQuery(data);
//.find("h1.heading:first").length;
//alert(t.find("div").length);
var isFlv = false;
if (data.indexOf('mp3file=') != -1)
{
var header = 'mp3file=';
var footer = '&totaltime=';
var previewURL = "http://mymedia.yam.com/mp3player2.swf?pID=" + mID;
var previewPlayer = jQuery("textarea.playerMP3").val();
previewPlayer = strReplace(previewPlayer, '<param name="movie" value="" />', '<param name="movie" value="'+previewURL+'" />');
previewPlayer = strReplace(previewPlayer, '<embed src="" quality="high"', '<embed src="'+previewURL+'" quality="high"');
}
else if (data.indexOf('&furl=') != -1)
{
isFlv = true;
var header = '&furl=';
var footer = '&hidecode=';
var previewURL = "http://mymedia.yam.com/flvplayer.swf?pID=" + mID;
var previewPlayer = jQuery("textarea.playerMP3").val();
previewPlayer = strReplace(previewPlayer, '<param name="movie" value="" />', '<param name="movie" value="'+previewURL+'" />');
previewPlayer = strReplace(previewPlayer, '<embed src="" quality="high"', '<embed src="'+previewURL+'" quality="high"');
}
var t = data.substring(data.indexOf(header)+header.length, data.indexOf(footer));
jQuery("#"+outputID+" div[title="+mID+"]:first a.downloader:first")
.attr("href", t)
.show();
jQuery("#"+outputID+" div[title="+mID+"]:first div.preview:first").html(previewPlayer);
if (isFlv == true)
jQuery("#"+outputID+" div[title="+mID+"]:first div.preview:first object").height("368px");
if (jQuery("#"+outputID+" div[title="+mID+"]:first :hidden").length == 0)
jQuery("#"+outputID+" div[title="+mID+"]:first span.waiting")
.hide();
});
}
function errorFlag()
{
jQuery("div.check-flag").show();
}
function strReplace(str, oldText, newText)
{
var temp = str.split(oldText);
if (temp.length > 1)
{
str = temp[0] + newText + temp[1];
}
return str;
}
</script>
</div>
</form>
<hr style="margin-top: 1em;" />
<p style="text-align:center;">
版本：<strong style="color:Red">20090126 大年初一</strong> | 程式寫作：<a href="mailto:puddingchen.35@gmail.com">布丁布丁吃布丁</a> | 出處：<a href="http://pulipuli.blogspot.com/2008/11/yam-ie.html">布丁布丁吃？</a> | 資料來源：<a href="http://www.yam.com/">yam天空部落</a><br />
<span style="font-size:small;">本程式僅是利用yam天空部落的程式碼做轉換、分析的動作，並不能確認資料本身是否符合智慧財產權。使用本程式下載任何資料，並不代表本程式立場。</span>
</p>
</body>
</html>
我只是想試試看jQuery的AJAX功能，就改進了以前的yam天空影音分享下載器，取代原本要用PHP去擷取網頁內容的困擾。
壞消息是只有IE在本機端以檔案的方式開啟，才能使用客戶端跨網域取得網頁內容的功能。好消息是這功能其實是比較不安全，不能方便地使用也好。原本我是打算直接寫在Blog裡面，結果發現只要是非本機的情況下，就不能使用跨網域取得網頁內容，這也算是一個收穫吧。
順便測試一下Windows Live Writer插入程式碼的外掛效果如何。事實證明，Insert Code for Windows Live Writer挺不賴的，感謝瓶水相逢.Net的Insert Code for Windows Live Writer 1.0.5 Beta - 加入捲軸功能 (20080427 修正)，但如果加上一個只有y軸的捲軸就更完美了。
(more...)
Comments