Tạo Flash Video Player giống NgoiSao.Net

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

s
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 video

if (VideoId == 0) {
if (Title != “” && Path != “”) {
if (IsFirstItem) {
showVideoObject(Path, Image);
IsFirstItem = false;
}
strOut += “

” + Title + “

“;
}
} 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 += “

” + Title + “

“;
}
}
}
});
$(“#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
fg
Download project theo link sau:

Download Project

Về tieuyeuit
Lập trình viên Asp.net Tôi chia sẻ một,bạn chia sẻ một và chúng ta có rất nhiều!

12 Responses to Tạo Flash Video Player giống NgoiSao.Net

  1. Pingback: Tao Flash Video Player giống NgoiSao.Net | Soft.HaGiangVui.Org

  2. Load video tu may nói:

    Em muốn load video từ máy minh phải ghi code trong xml lam sao vậy a

  3. tieuyeuit nói:

    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

  4. tung nói:

    bạn ở hà nội chứ
    cho mình gặp trao đổi được không ạ:x

    • tieuyeuit nói:

      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à

  5. C# nói:

    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!

  6. C# nói:

    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

  7. kaka nói:

    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

  8. kalida nói:

    Để 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.

  9. giải trí nói:

    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.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

%d bloggers like this: