Embedding Youtube music ngay trong trang của bạn

Hi bạn,

Hoctro hay sử dụng embed tag để cài một video vào trang post. Sau khi dùng nhiều lần, Hoctro tìm đến Google Code, thử coi nó có API nào cho Youtube không, để giảm thiểu việc dùng embed tag. Sau mấy tiếng đánh vật, trang Paul Mauriat Discography đã có thể nghe nhạc mà không cần phải mở thêm một window nào hết. Hoctro nghĩ cái này website nào cũng dùng được, chứ không riêng gì Blogger. Do vậy, chỉ cần ấn vào tên bản nhạc là có thể nghe được nhạc rồi đó bạn.

http://hoctroviet.blogspot.com/p/paul-mauriat.html#65vol1

Tiện đây hoctro viết các bước sửa nhé:

1. Sửa mã CSS trong phần header, (trước dấu này ]]> nếu là blogger). Cái CSS statement thứ ba rất quan trọng, vì nó làm cho yotube widget đứng yên, trong khi cả trang scoll xuống. Nếu bạn dùng code ở bước thứ ba cho widget, thì phải bỏ CSS tag này ra.

#videoDiv {
margin-right: 3px;
}


#videoInfo {
margin-left: 3px;
}


#content-links {

RIGHT: 55px; WIDTH: 230px; height: 8px; POSITION: fixed; BOTTOM: 20px
}


 2. Tiếp ngay sau đó thêm vào Javascript, ngay sau ]]>, nhưng trước tag header:

<script src="http://www.google.com/jsapi" type="text/javascript" />
<script type='text/javascript' >
google.load("swfobject", "2.1");


</script>
<script type="text/javascript">
/*
* Change out the video that is playing
*/


// Update a particular HTML element with a new value
function updateHTML(elmId, value) {
document.getElementById(elmId).innerHTML = value;
}

// Make the Youtube player visible or not. Basically at loading time it
// should be off, and only be on whenever the first video is clicked.
function ytVisible(value) {
attr = (value == true) ? "visible" : "hidden";
document.getElementById("ytPlayer").style.visibility = attr;
}


function loadVideo(id, num) {

if(ytPlayer) {
ytVisible(true);
if (!num) num=0;
ytPlayer.loadVideoById(id, num);
}
else // Flash not allowed, call loadVideoWindow
{
loadVideoWindow(id);
}
}
// Open a new window in case the video doesn't allow embedding
// or for peaceful degradation purposes
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()}
}


// This function is called when an error is thrown by the player
function onPlayerError(errorCode) {
alert("An error occured of type:" + errorCode);
}


// This function is automatically called by the player once it loads
function onYouTubePlayerReady(playerId) {
  ytPlayer = document.getElementById("ytPlayer");
  ytPlayer.addEventListener("onError", "onPlayerError");
  ytVisible(false);
}


// The "main method" of this sample. Called when someone clicks "Run".
function loadPlayer() {
// The video to load
var videoID = "jfivtWEAyrk"
// Lets Flash from another domain call JavaScript
var params = { allowScriptAccess: "always" };
// The element id of the Flash embed
var atts = { id: "ytPlayer" };
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +
"&amp;enablejsapi=1&amp;playerapiid=player1",
"videoDiv", "280", "25", "8", null, null, params, atts);
}
function _run() {
loadPlayer();
}
google.setOnLoadCallback(_run);


</script>

3. Giờ phải chế ra cái div để chứa cái video bar. Nếu static thì giữ CSS tag 3 như đã nói, và chèn cái này cuối HTML (trước cái </body> tag,) còn nếu widget thì bỏ CSS thứ ba ra, rồi bỏ mã này vô một HTML widget.

<div id='content-links'>
<div id='videoDiv'>Loading... </div>
</div>
 
Nếu bạn gắn đúng chỗ đó, trên Layout-Page Elements sẽ giống như sau, với Youtube bar dưới cùng:

4. Sau cùng, trong trang của mình, thêm vào tag "a" với href có cái ID của bài nhạc mình muốn nghe, thí dụ như:

<li><a href="javascript:void(0);" onclick="loadVideo('lOMhkGZdujY');">VOUS LES FEMMES (You the Women) (02:02)
(Enrique Macias / P.-R. Blanc & Jacques Demarny)</a></li>


<li><a href="javascript:void(0);" onclick="loadVideo('-JutiwteRj8');">N'AVOUE JAMAIS (I Wanna Know) (02:01)
(Guy Mardel - Francoise Dorin)</a></li>

Ngoài ra, bạn còn có thể bắt đầu bài nhạc từ số giây, thí dụ như bài Dancing on the ceiling dưới đây tôi cho bắt đầu từ 20 giây bằng cách them vào:

loadVideo('OdQDXs75Ulo',20);

và nếu bài nhạc không cho embed như bài Beat It, 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');

Hãy xem các biến thể đó ở đoạn sau:

"In 1985, a team of superstars gathered together to record the song"We Are the World". The song itself was a collaboration between Michael Jackson ((Beat It) and Lionel Richie (Hello, Dancing on the ceiling, etc.)"

Thân mến,

Hoctro

Update:

1. Hoctro mới thêm vào hai features mới: phát nhạc từ một thời điểm, và mở một popup phụ, nếu trang ấy không cho embed. Xin ấn vào đoạn chữ trên để thử.

2. Người dầu tiên lắp thành công là bạn Nhã. Tôi mừng quá trời, chỉ người khác làm đúng trên mạng không phải chuyện dễ làm. Mời các bạn xem ở trang này:

 http://khungcuanho.blogspot.com/2010_02_01_archive.html#7601296863844302422

3. Nếu bạn muốn sửa cái bar để thấy video, thì thay như sau:

a. Thay ở bước 1 thành:

#content-links {

RIGHT: 5px; WIDTH: 330px; height: 220px; POSITION: fixed; BOTTOM: 20px
}

b. Trong bước 2, tìm dòng này:
swfobject.embedSWF("http://www.youtube.com/v/" + videoID +

"&enablejsapi=1&playerapiid=player1",
"videoDiv", "280", "25", "8", null, null, params, atts);
}

rồi thay 280 và 25 như ở trên thành 300 và 225 như sau:

swfobject.embedSWF("http://www.youtube.com/v/" + videoID +

"&enablejsapi=1&playerapiid=player1",
"videoDiv", "300", "225", "8", null, null, params, atts);
}