Tôi rất vừa ý với cái YouTube mashup tôi làm hồi tháng 2, nhưng tôi cũng thấy cách này khó lắp đặt. Sau đây tôi sẽ trình bày một cách khác, mà bạn chỉ thêm Blogger HTML code rất it, rồi chỉ cần lắp 3 cái HTML/Javascript widgets là xong.
1. Cho đoạn code này ngay trước tag </head> và save template.
<script src='http://www.google.com/jsapi' type="text/javascript" />
<script type='text/javascript' >
google.load("swfobject", "2.1");
</script>
Nếu tỉm không ra tag </head> thì bạn cũng có thể lắp nó ngay ở đầu trang, ngay trước tag <head> như hình sau:
2. Sau đó, vào trang Layout->Page Elements. Ấn vào link Add a Gadget ở cột phụ:
Ấn vào trang HTML/Javascript
rồi cho vào đoạn mã sau:
<div id='content-links'>
<div id='videoDiv'>Loading... </div>
</div>
rồi ấn nút Save.
3. Ấn vào Add a Gadget và chọn tiếp trang HTML/Javascript
Chèn vào đoạn mã 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 vào Add a Gadget và chọn tiếp trang HTML/Javascript
Chèn vào đoạn mã sau, mỗi đoạn tag list (li) là một bài nhạc, với ID lấy từ link của address của video, như tôi tô đậm ở hình sau
<ul>
<li><a href="javascript:void(0);" onclick="loadVideo('4pOElMjQ-DI');">Tà Áo Xanh (Đoàn Chuẩn - Từ Linh) - Lệ Thu trình bày</a></li>
<li><a href="javascript:void(0);" onclick="loadVideo('hwgtZ48joP4');">Mùa Thu Cho Em (Ngô Thụy Miên) - Thanh Hà trình bà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ờ bạn sẽ thấy layout có 3 cái HTML/Javascript widgets:
Nếu mọi sự tốt đẹp, bạn sẽ thấy bài nhạc được load, rồi khi bạn ấn vào một link thì YouTube sẽ thay bài đang hát bằng 1 bài mới.
Chúc bạn thành công. Có gì không hiểu thì cứ hỏi, nếu biết thì tôi chỉ ngay.
Thân mến,
Hoctro
2/5/2010
8 comments:
Chào thầy Học Trò,
Hôm nay ngồi làm bở hơi tai cho mấy trang video linh tinh khác, làm xong tự hứa sẽ học tiếp bài Mask của thầy, vào đây thấy thầy cho bài mới nữa, bài này thì học trò đã áp dụng trong một trang blog khác rồi, trước khi thày chỉ nữa :-) Lúc đó nghĩ bụng thầy dấu nghề, chỉ dạy có một nửa làm học trò phải mò mẫn, làm xong lại nghĩ ông thầy này "ác quá" làm mình đau cả mắt :-)
Nhưng mà thày à, tại sao lại cần phải có phần code 1, vì học trò áp dụng trước đó không có phần này vẫn xử dụng được ở mấy cái HTML gadget. Có thì có lợi gì?
Cám ơn thầy nhé,
Chào Nhã,
Để hoctro sẽ đăng một bài giải thích. Mà thiệt là tức, cùng một code snippet y hệt như 2 tháng trước, và chạy ngon lành trên hoctro.blogspot.com, và hoctroviet.com, cái rồi sửa chút đỉnh cho video display to ra, thì now Firefox doesn't work anymore.
I hate browsers' war!!! Chỉ có developers là khổ! Và người lắp theo như Nhã và Bình là chịu cực theo.
ha ha, mới nói với thầy nó work, vì coi trong sở là IE, thày vào xem ở KCS mục Zen đó thì thấy cái column nó chạy tọt sang bên main page, trong khi ở nhà coi Firefox thì Ok. Trong khi mấy Page khác thì ok, thế nào là thế nào hở thầy HT. :-)
Chào Nhã,
Nhã còn làm hay hơn cả hoctro, cả hai bên IE lẫn Firefox đều xem được hết. Congrats! Thôi Nhã đừng sửa thêm nữa, kẻo nó lại hư thì khổ!
Thấy Nhã cho hai cái script tags lên đầu, cũng như thêm một command ngay trong load, hoctro làm thử thì cũng không được :-( It's really weird!
Chào thầy HT.
Thánh nhân đãi kẻ khù khờ đó thôi thày ạ, chứ học trò thuộc vào loại i -tờ, có biết gì đâu mà chêm này chêm kia, cứ copy của thày rồi sửa tí ti, cũng là copy nốt đó thôi. Ngoài ra có khi google nó làm đó thầy ạ :-)
nhưng sẽ làm một cái trang chỉ để học code thày chỉ xem nó ra làm sao.
Chúc thây vui nhé,
Cảm ơn anh Học trò nhiều lắm, loay hoay mất mấy hôm, nghiên cứu các bài anh hướng dẫn mới làm ra cái gọi là "blog nháp", chưa viết được gì, mới gọi là định dạng. Khổ nỗi tiếng Anh dốt, công nghệ cũng dốt, xem mấy cái hướng dẫn của google chẳng hiểu gì, chắc phải phiền nhiễu anh nhiều nhiều. Đọc blog của anh, nghĩ anh cũng rộng lượng nên yên tâm phần nào. Có gì, xin anh giúp.
Chào bạn np,
Hoctro có vào thử xem trang blog của bạn, thì thấy bạn chưa làm bước 1, còn các bước khác đều làm đúng hết. Có gì bạn xem lại cách làm bước một. Tôi đã thêm vào một cách phụ, theo cách của bạn Nhã làm.
Chúc bạn thành công.
Chào np.
Trong đoạn mã sau có 3 chỗ in đậm, đó là videoID, chiều rộng và chiều cao của video. np thử sửa nhé.
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);
}
Post a Comment