FB: 分享至臉書的預覽縮圖技巧(Tips to assign thumbnails you'd like to share in facebook)

如果沒有<link rel="image_src" href="name.jpg" />，將網頁分享至臉書(Facebook)時，臉書會將網頁中所有圖片都變成它分享時的預覽縮圖，包括廣告圖…；反之，也可指定讓網友分享的預覽縮圖，就是多放幾個像 <link rel="image_src" href="name.jpg" /> 這樣的東西囉！

讓CSS正確顯示中文字體

即使網頁已經是用UTF-8編碼，有時候還是會遇到亂碼的問題…例如在CSS中使用中文字體：微軟正黑體、新細明體…等，這問題真的很無奈！每次遇到都還是要想辦法把它變成unicode！雖然javascript可以讓中文字體變成UTF-8的功能：

<script type="text/javascript">

var uri="微軟正黑體";

document.write(encodeURIComponent(uri));

</script>

但CSS本身無法使用javascript…

這時候FireBug的指令列(Show Command Line > Command Line)就變成了我們的小幫手，可以幫我們達成中文字轉成unicode編碼的要求！只要在指令列使用「escape()」功能：

假設我們要CSS正確顯示「font-family:微軟正黑體;」，

在指令列用escape指令輸入「微軟正黑體」：

escape('微軟正黑體')

可以得到底下的回應：

%u5FAE%u8EDF%u6B63%u9ED1%u9AD4

再把所有的「%u」全取代成「/」(反斜線)就得到：

\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4

上面一串奇怪的數字加英文，就是我們要的unicode編碼！

將它取代原本的「微軟正黑體」：

font-family:\5FAE\8EDF\6B63\9ED1\9AD4,\65B0\7D30\660E\9AD4;

瀏覽器就可以正確顯示CSS中的「微軟正黑體」了！

另外，在Chrome、IE以及Safari的「開發人員工具」中，都有「主控台(Console)」可以使用「escape('中文字')」的功能，我覺得還滿不錯用的！

AS2: 用Flash播放YouTube裡的影片[一定得用控制面版版]

至於AS2控制YouTube影片的部份，Google也是有提供AS2 For YouTube Video的參考資料，但目前看來，似乎無法不使用Google提供的Video控制面版…

//指定YouTube Video ID序號, 例如：YHLWdb55iic

var myVideoID:String = "9evx8PZEMKU";

//自動播放：true, 不自動播放：false
var autoPlayVideo:Boolean = false;

//重覆播放：true, 不重覆播放：false
var loopVideoState:Boolean = false;

//聲音大小，最大100，最小：0 (無聲)
var myVolume:Number = 30;

//有聲：false, 無聲：true
var muteVideoState:Boolean = false;

//指定影片尺寸, 寬(videoWidth), 高(videoHeight)
var videoWidth:Number = 330;
var videoHeight:Number = 245;



//Below Functions Are Edited By Perr Tang
var autoPlayState:String;
if (autoPlayVideo == true) {
autoPlayState = "&autoplay=1";
} else {
autoPlayState = "";
}
var myVideoURL:String;
if (useControlPanelState == true) {
myVideoURL = "http://www.youtube.com/v/" + myVideoID + autoPlayState;
} else if (useControlPanelState == false) {
myVideoURL = "http://www.youtube.com/apiplayer?version=3&video_id=" + myVideoID+autoPlayState;
}
Security.allowDomain("www.youtube.com");

// create a MovieClip to load the player into
var ytplayer:MovieClip = _root.createEmptyMovieClip ("ytplayer", 1);

// create a listener object for the MovieClipLoader to use
var ytPlayerLoaderListener:Object = {onLoadInit:function () {
// When the player clip first loads, we start an interval to
// check for when the player is ready
loadInterval = setInterval (checkPlayerLoaded, 250);
}};
var loadInterval:Number;

function checkPlayerLoaded ():Void {
// once the player is ready, we can subscribe to events, or in the case of
// the chromeless player, we could load videos
if (ytplayer.isPlayerLoaded ()) {

ytplayer.setSize (videoWidth,videoHeight);//指定影片大小
trace ("width= " + videoWidth + " and height= " + videoHeight);
ytplayer.setVolume (myVolume);
if (muteVideoState == true) {
ytplayer.mute ();
}
ytplayer.addEventListener ("onStateChange",onPlayerStateChange);
ytplayer.addEventListener ("onError",onPlayerError);

clearInterval (loadInterval);
}
}

function onPlayerStateChange (newState:Number) {
trace ("New player state: " + newState);
if (newState == "0") {
if (loopVideoState == true) {
ytplayer.playVideo ();
} else {
ytplayer.stopVideo ();
}
}
}

function onPlayerError (errorCode:Number) {
trace ("An error occurred: " + errorCode);
}

// create a MovieClipLoader to handle the loading of the player
var ytPlayerLoader:MovieClipLoader = new MovieClipLoader ();
ytPlayerLoader.addListener (ytPlayerLoaderListener);

// load the player
ytPlayerLoader.loadClip (myVideoURL,ytplayer);
//ytPlayerLoader.loadClip("http://www.youtube.com/v/9evx8PZEMKU?version=3&loop=1&playlist=9evx8PZEMKU", ytplayer);

AS3: 用Flash播放YouTube裡的影片[加強版]

後來發現，人的需求是愈來愈高，一下子要這個功能，一下子又要那個功能…所以我把目前遇到所有「想要」的功能，寫成了一個ActionScript 3.0的程式碼，現在應該都有了吧！~~

//指定YouTube Video ID序號, 例如：YHLWdb55iic
var myVideoID:String = "YHLWdb55iic";

//自動播放：true, 不自動播放：false
var autoPlayVideo:Boolean = true;

// 用控制面版：true, 不用控制面版：false
var useControlPanelState:Boolean = false;

//重覆播放：true, 不重覆播放：false
var loopVideoState:Boolean = true;

//聲音大小，最大100，最小：0 (無聲)
var myVolume:Number = 10;

//有聲：false, 無聲：true
var muteVideoState:Boolean = false;

//指定影片尺寸, 寬(videoWidth), 高(videoHeight)
var videoWidth:Number = 300;
var videoHeight:Number = 215;

//Below Functions Are Edited By Perr Tang
var autoPlayState:String;
if(autoPlayVideo == true){
autoPlayState = "&autoplay=1";
}else{
autoPlayState = "";
}
var myVideoURL:String;
if(useControlPanelState == true){
myVideoURL = "http://www.youtube.com/v/" + myVideoID+"?version=3"+autoPlayState;
}else if(useControlPanelState == false){
myVideoURL = "http://www.youtube.com/apiplayer?version=3&video_id=" + myVideoID+autoPlayState;
}
// The player SWF file on www.youtube.com needs to communicate with your host
// SWF file. Your code must call Security.allowDomain() to allow this
// communication.(設定允許跨網域連到youtube.com)
Security.allowDomain("www.youtube.com");

// This will hold the API player instance once it is initialized.
var player:Object;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);


//loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3&video_id=YHLWdb55iic&autoplay=1"));
loader.load(new URLRequest(myVideoURL));

function onLoaderInit(event:Event):void {
addChild(loader);
loader.content.addEventListener("onReady", onPlayerReady);
loader.content.addEventListener("onError", onPlayerError);
loader.content.addEventListener("onStateChange", onPlayerStateChange);
loader.content.addEventListener("onPlaybackQualityChange",
onVideoPlaybackQualityChange);
}

function onPlayerReady(event:Event):void {
// Event.data contains the event parameter, which is the Player API ID
trace("player ready:", Object(event).data);

// Once this event has been dispatched by the player, we can use
// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
// to load a particular YouTube video.
player=loader.content;
// Set appropriate player dimensions for your application
player.setSize(videoWidth, videoHeight);//指定影片大小
player.setVolume(myVolume);
if(muteVideoState == true){
player.mute();
}
}

function onPlayerError(event:Event):void {
// Event.data contains the event parameter, which is the error code
trace("player error:", Object(event).data);
}

function onPlayerStateChange(event:Event):void {
// Event.data contains the event parameter, which is the new player state
trace("player state:", Object(event).data);
if(Object(event).data == "0"){
if(loopVideoState == true){
player.playVideo();
}else{
player.stopVideo();
}
}
}

function onVideoPlaybackQualityChange(event:Event):void {
// Event.data contains the event parameter, which is the new video quality
trace("video quality:", Object(event).data);
}

AS3: 用Flash播放YouTube裡的影片

今天遇到了一個用Flash播放youtube影片的問題，雖然有提供「可能」可以用的網站連結參考，但短時間還是試不出個所以然，所以回家後就google了一下，看看是否有別的方法…結果，還真的有方法！…

其實Google有針對自己的Player提出控制方法，請參考：YouTube ActionScript 3.0 Player API Reference ( http://code.google.com/intl/zh-TW/apis/youtube/flash_api_reference.html )

方法其實非常簡單！只是…不知道的人冤枉路就會走得很久遠…

首先，先找到你的youtube分享連結，例如孫燕姿的新歌：「世說心語」MV完整版，它的分享連結是：http://www.youtube.com/watch?v=pgdgaDdNgwo，「v=」後面就是它的影片ID(video id)，也就是「pgdgaDdNgwo」；這個ID很重要，因為我們它關係著我們要播的是哪支影片。

接下來把底下的ActionScript 3.0的語法貼到時間軸裡，並且將紅色的video id取代成你的youtube影片id就OK了：

// The player SWF file on www.youtube.com needs to communicate with your host
// SWF file. Your code must call Security.allowDomain() to allow this
// communication.(設定允許跨網域連到youtube.com)
Security.allowDomain("www.youtube.com");

// This will hold the API player instance once it is initialized.
var player:Object;

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.INIT, onLoaderInit);
loader.load(new URLRequest("http://www.youtube.com/apiplayer?version=3&video_id=pgdgaDdNgwo")); //換成你的video_id

function onLoaderInit(event:Event):void {
addChild(loader);
loader.content.addEventListener("onReady", onPlayerReady);
loader.content.addEventListener("onError", onPlayerError);
loader.content.addEventListener("onStateChange", onPlayerStateChange);
loader.content.addEventListener("onPlaybackQualityChange",
onVideoPlaybackQualityChange);
}

function onPlayerReady(event:Event):void {
// Event.data contains the event parameter, which is the Player API ID
trace("player ready:", Object(event).data);

// Once this event has been dispatched by the player, we can use
// cueVideoById, loadVideoById, cueVideoByUrl and loadVideoByUrl
// to load a particular YouTube video.
player = loader.content;
// Set appropriate player dimensions for your application
player.setSize(640, 390);//指定影片大小
player.playVideo(); //讓影片立刻播放
}

function onPlayerError(event:Event):void {
// Event.data contains the event parameter, which is the error code
trace("player error:", Object(event).data);
}

function onPlayerStateChange(event:Event):void {
// Event.data contains the event parameter, which is the new player state
trace("player state:", Object(event).data);
}

function onVideoPlaybackQualityChange(event:Event):void {
// Event.data contains the event parameter, which is the new video quality
trace("video quality:", Object(event).data);
}