Thiết Kế: Nghe nhạc YouTube từ một danh sách (Take 2)

Bạn mến,

Tôi rất vừa ý với cái YouTube mashup tôi làm hồi tháng 2, nhưng tôi cũng thấy cách này khó lắp đặt. Sau đây tôi sẽ trình bày một cách khác, mà bạn chỉ thêm Blogger HTML code rất it, rồi chỉ cần lắp 3 cái HTML/Javascript widgets là xong.

1. Cho đoạn code này ngay trước tag </head> và save template.

Phần 1 này rất quan trọng, nó dùng để load một cái Flash object vào trang, nếu không làm bước này thì các bước sau không chạy được.

2. Sau đó, vào trang Layout->Page Elements. Ấn vào link Add a Gadget ở cột phụ:

Ấn vào trang HTML/Javascript

rồi cho vào đoạn mã sau:

<div id='content-links'>
<div id='videoDiv'>Loading... </div>
</div>

rồi ấn nút Save.

3. Ấn vào Add a Gadget và chọn tiếp trang HTML/Javascript

Chèn vào đoạn mã sau:


<script type="text/javascript">

var ytPlayer;

function onYouTubePlayerReady(playerId) 
{
ytPlayer = document.getElementById("ytPlayer");
ytPlayer.addEventListener("onError", "onPlayerError"); 

}

function loadVideo(id, num) {
if(ytPlayer) {
if (!num) num=0;
ytPlayer.loadVideoById(id, num);
}
else 
{
loadVideoWindow(id);
}
}

function loadVideoWindow(id) {
var ytlink;
var newwindow;
ytlink = "http://www.youtube.com/watch?v=" + id; 
newwindow=window.open(ytlink,'name','height=600,width=700');
if (window.focus) {newwindow.focus()}
}

function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}


function loadPlayer() { 
var videoID = "jfivtWEAyrk";
var params = { allowScriptAccess: "always" };
var atts = { id: "ytPlayer" }; 
swfobject.embedSWF("http://www.youtube.com/v/" 
+ videoID + 
"&enablejsapi=1&playerapiid=player1", 
"videoDiv", "320", "270", "8", null, null, params, 
atts);
}

function _run() {
loadPlayer();
}

google.setOnLoadCallback(_run);

</script>

4. Ấn vào Add a Gadget và chọn tiếp trang HTML/Javascript

Chèn vào đoạn mã sau, mỗi đoạn tag list (li) là một bài nhạc, với ID lấy từ link của address của video, như tôi tô đậm ở hình sau



<ul>

<li><a href="javascript:void(0);" onclick="loadVideo('4pOElMjQ-DI');">Tà Áo Xanh (Đoàn Chuẩn - Từ Linh) - Lệ Thu trình bày</a></li>

<li><a href="javascript:void(0);" onclick="loadVideo('hwgtZ48joP4');">Mùa Thu Cho Em (Ngô Thụy Miên) - Thanh Hà trình bày</a></li>

</ul>

Ngoài ra, bạn còn có thể bắt đầu bài nhạc từ số giây, thí dụ như:
loadVideo('OdQDXs75Ulo',20);

và nếu bài nhạc không cho embed, tôi cũng có thể mở một window để xem. Bạn phải dùng một function mới là loadVideoWindow, (thay vì chỉ là loadVideo)

loadVideoWindow('Uqxo1SKB0z8');

Bây giờ bạn sẽ thấy layout có 3 cái HTML/Javascript widgets:

Nếu mọi sự tốt đẹp, bạn sẽ thấy bài nhạc được load, rồi khi bạn ấn vào một link thì YouTube sẽ thay bài đang hát bằng 1 bài mới.

Chúc bạn thành công. Có gì không hiểu thì cứ hỏi, nếu biết thì tôi chỉ ngay.

Thân mến,

Hoctro
2/5/2010

Thiết Kế

Chủ Nhật, 2 tháng 5, 2010

Nghe nhạc YouTube từ một danh sách (Take 2)

Không có nhận xét nào:

Đăng nhận xét