Tạo Flash Video Player giống NgoiSao.Net
29/09/2010 12 bình luận
Nếu bạn có duyệt Web qua trang http://ngoisao.net thì bạn dễ dàng để ý thấy Video Player của người ta:
1. Hiện Video đầu tiên khi load trang
2. Hiển thị Playlist được edit thông qua file XML
3. Click vào mỗi link của Playlist website sẽ không bị PostBack và hiển thị lên Player luôn bài được chọn
Cơ bản thì sẽ là:
1. Dùng Ajax để Load file xml lên và đọc nội dung trong file đó
2. Hiển thị tất cả Item trong file xml (tùy bạn) nếu gặp Item đầu tiên chúng ta sẽ Write luôn ra Player
3. Khi click vào link trên PlayList bạn phải sử lý sự kiện click làm sao khi người ta chọn file nào thì bạn phải biết file đó trong xml và load nó lên.
Chúng ta sẽ làm như sau:
B1: bạn tạo 1 Project trong Visual Studio (thực ra làm bằng Notepad++ cũng được nhưng để cho tiện chúng ta cứ xài VS)
B2. bạn vào file Default.aspx và thêm vào sau thẻ Body 3 thẻ div sau:
<body>
<div class=”player”>
<div id=”media_player”></div>
<div id=”list_player”></div>
</div>
</body>
div có class=”player” dùng để căn Player ra giữa màn hình
div có id=”media_player” dùng để hiển thị Flash Media lên đó
div có id=”list_player” dùng để liệt kê danh sách Video có trong playlist
CSS của mình như sau:
body {
margin:0px;
padding:0px;
}
.player {
margin:0 auto;
width:500px;
}
#media_player
{
width:500px;
height:350px;
}
B3: Thêm Jquery & thư viện swfobject vào website:
tất cả nằm trong thẻ nhé
B4. tạo hàm showVideoObject
hàm này dùng để hiển thị Flash Media Player lên Website mình viết riêng để có thể tái sử dụng cho lần sau
function showVideoObject(path, imagepath) {
var so = new SWFObject(‘player_viral.swf’, ‘MediaPlayer’, ‘500’, ‘350’, ‘8’);
so.addParam(‘allowscriptaccess’, ‘always’);
so.addParam(‘allowfullscreen’, ‘true’);
so.addVariable(‘width’, ‘500’);
so.addVariable(‘height’, ‘350’);
so.addVariable(‘file’, path);
//neu ImagePath == null thi
if (imagepath == ” || imagepath == ‘NULL’) {
//dua ra anh mac dinh cua Player
so.addVariable(‘image’, ‘bgMedia.jpg’);
}
else {
//con ko thi show ra anh cua video
so.addVariable(‘image’, imagepath);
}
so.write(‘media_player’);
}
B5. Chúng ta có tiếp hàm showVideo đây cũng là hàm quan trọng nhất
trong hàm showVideo chúng ta sẽ:
Viết JQuery Ajax để đọc nội dung trong file xml (playlist của chúng ta) đồng thời
Hiển thị ra các clip khác có trong file xml
function showVideo(VideoId) {
//viet Ajax JQuery de lay du lieu tu File XML ve
$.ajax({
type: “GET”, //method
url: “tv.xml”, //file XML Source
dataType: “xml”, //data response type
success: function(xml) {
var strOut = “”;
$(xml).find(“I”).each(function() {
var ID = $(this).find(“I”).text(); //get VideoID
var Title = $(this).find(“T”).text(); //get Title of Video
var Path = $(this).find(“P”).text(); //get video source
var Image = $(this).find(“IP”).text(); //get image of videoif (VideoId == 0) {
if (Title != “” && Path != “”) {
if (IsFirstItem) {
showVideoObject(Path, Image);
IsFirstItem = false;
}
strOut += ““;
}
} else if (VideoId != 0) {
if (Title != “” && Path != “”) {
if (ID == VideoId) {
//cac ban luu y la chung ta dang o vong lap vi vay no se duyet het cac item trong file xml nay
//tai day chung ta kiem tra
//neu ID của Item (dang duyet) == voi VideoID chung ta nhap vao thi se goi ham Show Flash Media Player
showVideoObject(Path, Image);
} else {
//doan nay se write ra 2 Item con lai (trong file xml của ta chi co 3 Item)
//ma 1 Item dang duoc xem roi thì chung ta chi show ra 2 Item con lai thoi de nguoi dung tien theo doi.
strOut += ““;
}
}
}
});
$(“#list_player”).html(strOut);
}
});
B6. Cuối cùng chúng ta sẽ viết sự kiện Page Load (document ready) của Javascript
$(document).ready(function() {
showVideo(0);
});
showVideo(0); ? Nếu VideoId = 0 thì chúng ta sẽ liệt kê tất cả các clip có trong file xml và mặc định hiển thị lên Item đầu tiên
B7. Ctrl + F5 và bạn sẽ thấy kết quả.
Chúc bạn thành công
Download project theo link sau:
Giới thiệu tieuyeuit
Tieuyeuit's Blog 
Pingback: Tao Flash Video Player giống NgoiSao.Net | Soft.HaGiangVui.Org
Em muốn load video từ máy minh phải ghi code trong xml lam sao vậy a
bạn đổ dữ liệu vào dataset hay table song write ra xml thôi là sài được OK
bạn à,
có gì thì post lên nha
bạn ở hà nội chứ
cho mình gặp trao đổi được không ạ:x
dữ liệu bạn trả về 1 datatable
Data db=new Data();
string Sql = “SELECT* FROM tbl_video”;
dt = db.GetData(Sql); // truy vấn
if (dt != null && dt.Rows.Count > 0)
dt.WriteXml(sFilenameXML); //ghi ra file xml
}
vậy thôi
bạn chèn đoạn jquery vào là OK mà
Vậy nếu trong trường hợp tôi muốn các file flash sẽ được nhập vào và lưu trữ trong SQL Server 2005 thì phải làm thế nào bạn ơi!
lúc bạn upload file thì bạn đã lưu trong database rồi mà?
lúc bạn lấy ra thì bạn đổ dữ liệu ra datatable ->writexml thôi
chứ ko phải mình viết quản trị file = xml
trang này mình cũng làm nhu thế này
http://demofrontend1.3c.com.vn
Bạn tieuyeuit ơi. Vậy thì kiểu dữ liệu của trường lưu đường dẫn tới file flash là kiểu Nvarchar bình thường hay phải kiểu gì bạn
kiểu bình thường thôi,bạn chỉ lưu cái đường dẫn thôi mà,lúc gọi thì gọi theo đường dẫn mà
Anh có video hướng dẫn làm cái ví dụ này không ? up lên giùm em với .
Em muốn hỏi anh là làm sao anh biết Link để xem File Xml Của trang anh đang làm theo. Em mò hoài mà không ra> em đã xem clip anh hướng dẫn về cách lấy tỉ giá của VietComBank mà vẫn không hiểu là làm sao anh biết được Link là http://www.vietcombank.com.vn/ExchangeRates/ExrateXML.aspx
Để ghi dữ liệu ra file xml bạn tạo file .ashx và write node của XML ra là xong.
http://minhhien.info/CMSHandlers/Hienkm.ashx
Demo: video ở trang chủ : http://minhhien.info, nếu làm không được bạn comment tại đây hoặc gửi contact cho mình http://minhhien.info/lien-he.aspx mình sẽ gửi code demo cho bạn.
hello there and thank you for your information – I’ve definitely picked up something new from right here. I did however expertise several technical points using this website, since I experienced to reload the site a lot of times previous to I could get it to load properly. I had been wondering if your web hosting is OK? Not that I’m complaining,
but sluggish loading instances times will very frequently affect your placement
in google and could damage your quality score if advertising and marketing with Adwords.
Well I am adding this RSS to my e-mail and could look out for a lot more of your respective
interesting content. Ensure that you update this again soon.