2008年11月30日星期日

yam天空部落-影音分享下載器(IE版)

image

大年初一,終於把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挺不賴的,感謝瓶水相逢.NetInsert Code for Windows Live Writer 1.0.5 Beta - 加入捲軸功能 (20080427 修正),但如果加上一個只有y軸的捲軸就更完美了。

5 意見:

  1. 布丁布丁吃布丁 提到...

    終於在大年初一推出了更新版本啦,下載yam天空部落影音的功能更方便,更容易欣賞好歌曲、好影片!

  2. 匿名 提到...

    布丁大人QQ這強大的下載器這兩天用好像壞掉了,不知道是不是可以請您看一看?謝謝Q____Q

  3. 布丁布丁吃布丁 提到...

    http://cid-7113c88187767b01.skydrive.live.com/self.aspx/public/2010/06/yamBlogDownloader.html?wa=wsignin1.0&sa=679530243

    我備份到SkyDrive去了。原本的連結好像也是SkyDrive的,但似乎他換了位置?
    附帶一提,根據Google Analytics的報告,這一篇是我Blog中被瀏覽次數最多的一篇文章,截至目前為止共有8,283瀏覽量,佔全全部覽量37.87%。

  4. a594226 提到...

    布丁大你好 我一直都是影音分享器的愛用者
    不過換別台電腦後 他就一值卡在分析中XD

  5. 布丁布丁吃布丁 提到...

    你好:

    似乎是IE的權限不給人這樣做了。
    這本來就是利用IE的安全性漏洞來做的功能,被修補掉是可以預想的事情。

    Yam天空部落的下載器多到不勝枚舉
    推薦你使用「[Yami] Yam Music Instant (Yam 音樂下載+即時搜尋+線上播放)」
    http://art.twgg.org/2010/09/yami-yam-music-instant-yam.html

張貼留言