Bạn,
Nhân rảnh rỗi và có bạn Nhã hỏi một câu hỏi nhỏ, tôi viết bài này để giới thiệu thêm vài cái links hữu ích cho các bạn hiểu thêm hay muốn dùng Google's và tại sao tôi nảy ra ý tưởng là một cái "mashup" về YouTube trong Blogger.
Cách đây vài tháng, tôi tìm ra được một Youtube của một người bên Đài Loan, chứa rất nhiều nhạc Paul Mauriat, trong đó hơn một nửa là nhạc hiếm, nhiều bài tôi chưa từng nghe.
http://www.youtube.com/profile?user=o1160507#p/u/6/jxwkhbxO2V0Lúc đó tôi cũng i-tờ về YouTube, chỉ biết dùng embed code rồi mang về lắp từng bài, mỗi khi thấy có bài hay. Kiểu này mang mấy cái embed này về mà lắp 300+ bài chắc chết! Lại tốn nhiều công sức nữa!
Cùng lúc đang mê nhạc Paul trở lại đó, thì tôi lại tìm ra một trang nhạc khác, có đầy đủ Paul's discography:
http://www.soundtrackfan.com/pmauriat/discos/discografia-referencial-visual.htmlThấy đẹp là tôi muốn rinh về ngay, và đã in ra một tập nhạc thật đẹp để ngắm, nhưng rồi tôi nghĩ, nếu mình ấn vào một bài, mà nghe được ngay, rồi ấn vào link khác, nó sẽ đổi nhạc, nhưng vẫn chung một trang đang xem, thì hay biết mấy. Nghĩ là đi tìm dụng cụ làm liền.
Như mọi khi, muốn viết tiện ích cho Goggle, thì phải vào trang này:
http://code.google.com/intl/en/Viết cho YouTube thì phải lần mò đến trang này:
http://code.google.com/intl/en/apis/youtube/overview.htmlLựa các trang để tìm ra trang thích hợp, thì tôi tới trang này:
http://code.google.com/intl/en/apis/youtube/js_api_reference.htmlThế là in ra để "ngâm cứu". Sau một ngày tìm hiểu thì tôi đã hiểu sơ sơ cách gắn. Bước kế tiếp là gắn thử.
Đầu tiên là tôi đi tìm trang "demonstration" (demo)
http://code.google.com/intl/en/apis/youtube/youtube_player_demo.htmlCông nhận cái trang này chỉ rất nhiều cách để thay đổi Youtube video. Tôi bèn in ra code để xem, thì thấy cũng OK, chỉ cái là nó nhiều thứ linh tinh quá. May thay, tôi nhớ Google có một cái tool rất "cool", đó là
Google Code Playground, cho phép bạn code thử trên ô trên, và máy sẽ hiện kết quả trên ô dưới. (Bạn phải dùng Firefox để access được trang này.)
http://code.google.com/apis/ajax/playground/?exp=youtube#simple_embedTôi dòm vào cái code, thì thấy nó thật đơn giản, đơn giản hơn nhiều cái HTML code demo 10+ trang mà tôi đã in.
Nếu bạn ấn vào nút
Edit HTML trong góc phải bên trên, bạn sẽ thấy toàn bộ mã, đây là căn bản mã mà tôi dùng để lắp ráp trang mashup sau này.
Đó là "lịch sử hình thành" của mashup. Sau đây là giải thích sơ ý nghĩa của từng bước của post trước:
http://hoctroviet.blogspot.com/2010/05/nghe-nhac-youtube-tu-mot-danh-sach-take.html1. Đoạn mã này dùng để "load"
swfobject, version 2.1, cũng như load
<script src='http://www.google.com/jsapi' type="text/javascript" />
<script type='text/javascript' >
google.load("swfobject", "2.1");
</script>Câu script đầu thì làm cho variable "google" dùng được.
Câu thứ hai dùng để load swfobject, là phần mềm từ Adobe, dùng kỹ thuật Flash, để có thể load video vào. Nếu không có dòng này, thì dòng dưới #3
swfobject.embedSWF("http://www.youtube.com ... không thực hiện được. Ngoài ra, hai câu scripts này phải nằm trong phần head, cho máy laod trước khi load phần body.
2. Ba câu sau là chỗ mà video sẽ hiện ra. Vì thế, nếu ta làm nó thành một widget, thì ta có thể dễ dàng di chuyển sau này khi dùng trang Layout->Page Elements. Nếu tinh ý hơn, như cách bạn Nhã đang dùng, ta cũng có thể chèn đoạn này vào trong một post. Tuy nhiên, ta chỉ chèn được một lần thôi, vì tên tag videoDiv là unique, nếu để 2 cái thì cái thứ hai không có tác dụng, chỉ đứng trơ ra đó mà dòm thôi.
<div id='content-links'>
<div id='videodiv'>Loading... </div>
</div>3. Phần mã chính.
Trước tiên, khi browser loads trang mình vô memory, nó sẽ thấy lệnh này:
google.setOnLoadCallback(_run);Câu này nói là nếu máy load được thì làm ơn load dùm một function có tên là _run.
Đây là function _run(), nó có thể làm nhiều việc, như load vài ba cái player chẳng hạn, nhưng trong application này nó chỉ load một function có tên là loadPlayer()
function _run() {
loadPlayer();
}Đây là nội dung của loadPlayer()
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 này đại khái là nó muốn load một cái player, với video có tên là "jfivtWEAyrk", với chiều rộng là 320 pixels, chiều cao là 270 pixels.
Nếu máy load thành công thì hình sẽ hiện ra trong tag "videoDiv", còn không thì ta thấy dòng chữ Loading ... ở step 2 hoài.
Các giải thích khác mời bạn xem kỹ hơn ở đây
http://code.google.com/intl/en/apis/youtube/js_api_reference.htmlNếu có hình hiện ra, máy cũng sẽ đọc tiếp được những lệnh mình muốn làm trong function
onYouTubePlayerReady(playerId).Function này cũng không là gì cao siêu hết, chỉ nhắn rằng nếu có gì trục trặc từ rày về sau (onError), thì gọi function onPlayerError() để nó tìm cách chữa.
function onYouTubePlayerReady(playerId)
{
ytPlayer = document.getElementById("ytPlayer");
ytPlayer.addEventListener("onError", "onPlayerError");
}Thực ra thì cũng chả chữa được gì, nó chỉ tạo ra một cái info window, rồi báo tên lỗi mà thôi.
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}Hai đoạn code chính tôi chèn vào để mashup, là:
function loadVideo(id, num) {
if(ytPlayer) {
if (!num) num=0;
ytPlayer.loadVideoById(id, num);
}
else
{
loadVideoWindow(id);
}
}là một bản thêm thắt kha khá so với bản gốc trên trang hướng dẫn:
function play() {
if (ytplayer) {
ytplayer.playVideo();
}
}Tôi viết rằng, nếu cái
ytPlayer mà load thành công, thì trước tiên xem số giây (seconds) có gửi theo không, nếu không thì cho nó = zero, tức là ở đầu video. Đôi khi, một video có MC giới thiệu rườm rà, ta có thể dùng cách này để nghe thẳng nhạc mà khỏi phải nghe MC ca. Sau đó thì tôi gọi thẳng function
ytPlayer.loadVideoById(id, num); để load và chơi bài nhạc với id, và num đã gửi kèm trong lệnh gọi, thí dụ như:
<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>
Ngoài ra, nếu
ytPlayer load không thành công, tôi cũng sẽ mở được nó ra với lệnh gọi
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()}
}trong đó, tôi thu xếp ("assembled") cái URL cho nó gọi Youtube link, rồi mở một cái window mới, chiều rộng 700, chiều cao 600 pixels. Sau rốt là làm cho window đó active bằng lệnh
newwindow.focus().
Trong cái mashup trước, tôi còn tìm tòi để sửa Youtube video thành một thanh, chỉ có nghe chứ không thấy hình. Nếu bạn xem kỹ 3 cái CSS tags, thì thấy tôi tìm cách làm nó "bất động", lúc nào cũng nằm ở bên dưới tay phải. Hiện tôi còn để trang như vậy ở bên blog anh ngữ
http://hoctro.blogspot.com/Bài mashup đó ở đây:
http://hoctroviet.blogspot.com/2010/02/embedding-youtube-music-ngay-trong.htmlSau khi làm xong mashup, tôi bỏ ra một vài ngày lắp trang này, chỉ mới hòan thành một nửa trên, dùng nhạc của anh bạn người Đài Loan, vì nửa dưới số lượng bài khó tìm hơn trên YouTube.
http://hoctroviet.blogspot.com/p/paul-mauriat.htmlCái mà tôi ghét nhất khi làm xong là phải coi xem hai bên Internet Explorer, và Firefox có work hay không. Vì Firefox là hậu thân của Netscape hồi "browser war" năm 95, trong đó Microsoft thắng cuộc, nên hai software này không hề muốn compatible với nhau chút nào, làm người developers như tôi phải khổ sở để làm vừa ý, cho mashup chạy được cả hai bên. Code javascipt thì đúng rồi, mà bên này chạy còn bên kia thì không, chả hiểu tại sao????
Đó là "sự tích Youtube mashup" :-) Như bạn thấy, cũng chẳng có gì là bí hiểm, nói như Steve Jobs trong bài diễn văn ông đọc chào mừng ra trường, là ông chỉ biết cách "
connect the dots" thôi. Tôi có dịch bài đó ở đây, nhân mùa tan trường mời bạn cùng xem lại.
http://hoctroviet.blogspot.com/2009/11/ban-phai-tim-thay-ieu-ban-yeu-thich-loi.htmlChúc bạn một đầu tuần thật vui.
Hoctro.
5/3/2010
