做個YouTube Player

[JavaScript版本]

先看這個YouTube Player例子，在頁面上方內嵌YouTube Player的語法，而點選Listview項目就將要播放的YouTube影片替換掉，這是一個純粹使用getElementById()的JavaScript範例程式(jsfiddle) (jsbin)。

更進一步，練習看看再把每個影片的序號與標題都存放在陣列裡，然後也是以JavaScript來產生影片清單的HTML語法，這個陣列版範例程式(jsfiddle) (jsbin)使用的招式以後會常用到喔，以後總會需要從資料庫讀取資料，再產生要顯示的HTML碼，大概就跟這個例子的陣列版本招式差不多。


[jQuery版本]

再看這個YouTube Player例子，注意內嵌YouTube Player之HTML碼只有一份喔，裡面也沒有條件判斷來代入不同的影片網址，那是怎麼辦到的呢？這就要歸功於jQuery Selector的作用囉！在CSS中，有所謂Selector的概念，jQuery Selector很重要的精神便在於企圖在JavaScript裡實踐CSS3 Selector的效果，簡化了選取要處理的HTML元素之過程。簡言之，在這個jQuery版本範例程式(jsfiddle) (jsbin)就是用jQuery Selector語法找出內嵌YouTube Player之HTML碼裡面的影片網址之處，然後將之替換掉，就可以播放不同影片了。

[Playlist Show版本]

再看這個YouTube Playlist Show例子，是直接呈現到高雄看黃色小鴨播放清單內的影片，這個程式(jsfiddle) (jsbin)與前一個程式的差別就只有在取得播放清單的 feed 來解析，同樣是採用YouTube Data API的相關語法。YouTube Data API (v2) has been officially deprecated as of March 4, 2014，目前已無法正確執行!

YouTube Data API (v3)的使用，在開始之前就要先到Google Developers Console建立專案並完成兩個動作：(1)點選側欄導覽選單>API和服務>資訊主頁，將YouTube Data API啟用之、(2)點選側欄憑證功能建立新的金鑰。

依據YouTube Data API (v3)的播放清單feed取得的語法，用這個Javascript程式(jsfiddle) (jsbin) 或 這個jQuery程式(jsfiddle) (jsbin) 來改寫囉。(要看懂此程式則需要了解The JSON structure of a videos resource.)

[Channel Show版本]

再看這個YouTube Channel Show例子，是直接呈現紅毛港文化園區頻道內的影片，在這個程式(jsfiddle) (jsbin)的重點是採用YouTube Data API的相關語法取得頻道的 feed 來解析，再做縮圖排列呈現。而YouTube的feed是JSON(JavaScript Object Notation)格式，要能瞭解此範例的邏輯，可從w3schools學會JSON Tutorial介紹的概念。雖然YouTube Data API (v2) has been officially deprecated as of March 4, 2014，但還是可以用，目前已無法正確執行!

依據YouTube Data API (v3)的頻道feed取得的語法，用這個Javascript程式(jsfiddle) (jsbin) 或 這個jQuery程式(jsfiddle) (jsbin)來改寫囉。(要看懂此程式則需要了解The JSON structure of a videos resource.)