| Dùng JW Player đưa nhạc và video vào blogspot | ![]() | ![]() | ![]() |
| Hôm nay viết tut này giúp mọi người chèn nhạc và video vào blog hoàn toàn theo ý bạn muốn, cực pờ rồ luôn Giới thiệu sơ qua về JW Player cho bạn nào chưa biết nó: JW Player là 1 chương trình flash mã nguồn mở dùng để phát nhạc và video được sử dụng phổ biến ở rất nhiều các trang web, diễn đàn Đây là trang chủ: http://www.longtailvideo.com Về âm thanh, JW Player hỗ trợ 2 định dạng: MP3 & ACC Về video, JW Player hỗ trợ 2 định dạng: FLV & MP4 JW Player có giao diện gốc rất đơn giản: ![]() Nhưng với sự tùy biến rất linh hoạt thông qua việc khai báo biến trực tiếp hoặc thiết lập qua 1 file điều khiển dạng xml các bạn có thể thay đổi giao diện, thêm bớt các chức năng theo ý mình như tự động chơi, chơi ngẫu nhiên, thêm ảnh cho bài hát hay video, thêm logo của riêng bạn vv... <embed width="chiều rộng file flash" height="chiều cao file flash" type="application/x-shockwave-flash" src="link file JW Player" flashvars="các biến của JW Player"> </embed> Trong đó: - chiều rộng và chiều cao file flash: bạn có thể đặt theo ý bạn. Tuy nhiên ở đây bạn dùng JW Player để phát nhạc hoặc video thì kích cỡ chiều rộng và chiều cao nên theo tỉ lệ của ảnh hoặc video mà bạn chèn vào và tớ thường dùng theo tỉ lệ 4:3. - link file flash: bạn thay bằng link mà bạn đã upload JW Player hoặc bạn có thể dùng luôn JW Player từ trang chủ: http://player.longtailvideo.com/player.swf - flashvars="các biến của JW Player": đây chính là phần khai báo kết hợp các biến để tùy biến JW Player hoạt động theo ý bạn. Như vậy code tổng quát để chèn JW Player vào blog như sau: <embed width="400" height="330" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player.swf" flashvars="các biến của JW Player"> </embed> 2. Các biến của JW Player: Các bạn có thể đọc các biến của JW Player tại đây: http://developer.longtailvideo.com/trac/wiki/FlashVars Bạn chỉ cần quan tâm tới 3 phần: http://www.longtailvideo.com/addons/skins Sau khi tải về, các bạn chỉ việc lấy file flash swf trong đó ra rồi upload lấy link trực tiếp để dùng, hoặc bạn có thể dùng sẵn skin từ trang chủ: Snel: http://www.longtailvideo.com/files/skins/snel.swf * logo: chèn logo của bạn. Logo sẽ hiển thị ở góc phải phía trên màn hình JW Player * controlbar: đây chính là thanh điều khiển của JW Player bao gồm các nút như Player, Stop, Volume... * autostart: quy định tự động chơi hoặc không. Mặc định là không tự động chơi. Nếu bạn muốn tự động chơi thì khai báo * repeat: lặp lại. * shuffle: chơi bài 1 cách ngẫu nhiên, tác dụng khi bạn chèn 1 danh sách nhạc mà thôi. (phần 6) * smoothing: khi chiếu video, bạn nên sử dụng biến này để có hình ảnh mịn màng hơn. * stretching: co dãn ảnh hiển thị ở màn hình JW Player, mặc định stretching=uniform * volume: chỉnh âm lượng mặc định ban đầu theo ý bạn, giá trị từ 0 tới 100% Hình minh họa một số biến bạn có thể thấy ở giao diện JW Player: ![]() 3. Code cơ bản - Chèn 1 bản nhạc hay 1 file video vào blog: Như đã nói ở phần 2, khi bạn đưa code vào trong entry ở blogspot, thì dấu & bạn sẽ phải chuyển thành & thì blogspot mới hiểu được (cái này blogspot dốt hơn thằng Yahoo Plus <embed width="400" height="320" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player.swf" flashvars="image=http://img18.imageshack.us/img18/9954/kittycm.jpg&file=http://hpbox.425mb.com/media/music/Bai_Khong_Ten_so_4.mp3"> </embed> b. Chèn video: <embed width="400" height="320" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player.swf" flashvars="image=http://img11.imageshack.us/img11/4392/laislabonita.jpg&file=http://hpbox.425mb.com/media/video/La_Isla_Bonita.mp4&smoothing=1" allowfullscreen="true"> </embed> 2 code trên sử dụng skin mặc định đơn giản, hiển thị ảnh ở màn hình JW Player. ![]() - allowfullsreen="true": cho phép xem toàn màn hình vi tính. Nhấn vào nút fullsreen ở thanh điều khiển là bạn có thể xem toàn màn hình. Tuy nhiên chức năng này ở Yahoo Plus thì bị tịt ngòi vì thằng Yahoo nó cắt xén code, không cho dùng đầy đủ. Ví dụ đây là code chơi nhạc với skin Sneil, thay đổi màu các nút lệnh, hiển thị logo, tự động chơi nhạc, không hiển thị các icon trên màn hình, âm lượng mức 70% <embed width="400" height="330" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player.swf" flashvars="skin=http://www.longtailvideo.com/files/skins/snel.swf&backcolor=fffffff&frontcolor=000000&lightcolor=66cc00&image=http://img37.imageshack.us/img37/7007/kittyz.jpg&logo=http://img27.imageshack.us/img27/3257/logohz.png&file=http://hpbox.425mb.com/media/music/Beo_Dat_May_Troi.mp3&autostart=1&icons=0&volume=70" </embed> Ví dụ đây là code chơi video với skin Stijl, hiển thị logo, hiển thị icons, tự động ẩn thanh điều khiển: <embed width="400" height="300" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player.swf" flashvars="skin=http://www.longtailvideo.com/files/skins/stijl.swf&logo=http://img27.imageshack.us/img27/3257/logohz.png&image=http://img11.imageshack.us/img11/6226/swayl.jpg&file=http://hpbox.425mb.com/media/video/Sway.mp4&smoothing=1&controlbar=over" allowfullscreen="true"> </embed> 5. Code nâng cao - dùng file điều khiển xml thay thế: <config> <quality>true</quality> <skin>http://www.longtailvideo.com/files/skins/snel.swf</skin> <logo>http://img27.imageshack.us/img27/3257/logohz.png</logo> <backcolor>#ffffff</backcolor> <frontcolor>#000000</frontcolor> <lightcolor>#66cc00</lightcolor> <screencolor>#000000</screencolor> <controlbar>bottom</controlbar> <icons>0</icons> <displayclick>play</displayclick> <smoothing>1</smoothing> <autostart>0</autostart> <repeat>list</repeat> <shuffle>1</shuffle> <volume>90</volume> </config> Nếu bạn theo dõi bài viết từ đầu tới đây thì nhìn cấu trúc bạn đã có thể hiểu cách khai báo biến như thế nào. Bạn có thể thay logo và skin bằng link của bạn, thêm bớt các biến khác tùy ý bạn. Ở đây bạn cũng có thể thêm 2 biến <image> & <file> để khai báo ảnh và file muốn chèn vào nhưng 2 cái này luôn thay đổi nên không cần thiết phải thêm. Bạn lưu file txt này, sau đó đổi đuôi txt thành xml: config.xml Một điều quan trọng là khi dùng file config.xml để khai báo thì file flash JW Player (player.swf) bạn cũng phải upload lên cùng với thư mục chứa file config.xml. 2 file này phải nằm chung trong 1 thư mục khi đó JW Player mới có thể truy xuất thông tin ở file config.xml ![]() Giờ đưa file config.xml này vào JW Player: <embed width="400" height="330" type="application/x-shockwave-flash" src="http://hpbox.425mb.com/media/jwplayer/player.swf" flashvars="config=http://hpbox.425mb.com/media/jwplayer/config.xml&file=http://hpbox.425mb.com/media/video/vediem.mp4" allowfullscreen="true"> </embed> Như vậy bạn thấy code ngắn gọn và dễ nhìn hơn rất nhiều. Thêm 1 tùy biến linh họat nữa của JW Player là dù bạn thiết lập mọi thứ trong file config.xml, ví dụ như trên volume=90, nếu bạn muốn thay đổi thành volume=100 bạn cũng không cần phải sửa lại file config.xml mà chỉ việc khai báo biến vào trực tiếp như ở các phần 3, 4. Khi ấy JW Player sẽ ưu tiên các biến khai báo trực tiếp và bỏ qua các biến trùng lặp ở config.xml <embed width="400" height="330" type="application/x-shockwave-flash" src="http://hpbox.425mb.com/media/jwplayer/player.swf" flashvars="config=http://hpbox.425mb.com/media/jwplayer/config.xml&file=http://hpbox.425mb.com/media/video/vediem.mp4&volume=100" allowfullscreen="true"> </embed> Đây là video minh họa cho phần dùng file xml thay thế: 6. Code nâng cao - Chèn 1 list nhạc & video vào blog: <playlist > <tracklist> <track> <title>Tên bài hát</title> <annotation>Miêu tả</annotation> <location>link bài nhạc hay video</location> <image>link ảnh minh họa sẽ hiển thị trên màn hình JW Player</image> <info>link bạn muốn chỉ dẫn cho bài</info> </track> <track> <title>Bài Không Tên Số 4 (Vũ Thành An)</title> <annotation>Ghita solo: Đỗ Minh Thông</annotation> <location>http://hpbox.425mb.com/media/music/Bai_Khong_Ten_so_4.mp3 </location> <image>http://img37.imageshack.us/img37/7007/kittyz.jpg</image> <info>http://huypham.tk/</info> </track> </tracklist> </playlist> Phần để hỗ trợ hiển thị tiếng Việt Mỗi file khai báo sẽ nằm trong cặp thẻ <track> </track> Chi tiết khai báo mỗi file như tớ minh họa ở track đầu tiên, track thứ 2 là khai báo hoàn chỉnh 1 file. Cặp thẻ <image> </image> và <infor> </infor> không nhất thiết phải có. Bạn có thể thêm hoặc bỏ là tùy ý. Tất cả các ảnh minh họa cho mỗi file, bạn nên để cùng 1 kích cỡ WxH = 400x300 chẳng hạn. Sau khi thêm các file bạn muốn, tại cửa sổ Notepad, bạn hãy vào File / Save as Cửa sổ Save As hiện ra , phần File name bạn gõ: "playlist.xml" ( tên file đặt trong ngoặc kép để tạo trực tiếp file xml luôn) Phần Encoding bạn chọn UTF-8 Sau đó nhấn Save, vậy là bạn đã hoàn thành xong 1 playlist cho JW Player. Hình minh hoạ: ![]() Giờ bạn hãy upload file playlist.xml này lên host hoặc website lưu trữ cho link trực tiếp rồi lấy link để dùng. b. Đưa playlist vào JW Player: Code như sau: <embed width="400" height="390" type="application/x-shockwave-flash" src="http://hpbox.425mb.com/media/jwplayer/player.swf" flashvars="config="http://hpbox.425mb.com/media/jwplayer/config.xml&file=http://hpbox.425mb.com/media/jwplayer/playlist.xml&playlistsize=60&playlist=bottom" allowfullscreen="true"> </embed> Bạn sẽ thấy ở code này tớ đặt chiều cao là 390. Nó sẽ bằng tổng chiều cao ảnh hiển thị (300) + chiều cao của controlbar (30) + chiều cao của playlist (60) Hình minh hoạ: ![]() - file=http://hpbox.425mb.com/media/jwplayer/playlist.xml: khai báo đường dẫn của file playlist.xml 7. Bonus: * Bonus 1: ![]() nhưng ở blog của tớ nếu bạn bấm nút chơi lại không có cái logo đó hiện ra http://www.mediafire.com/?zymqojwtkte * Bonus 2:1 host fee tốt cho bạn: http://www.425mb.com 1 website lưu trữ cho link trực tiếp: http://www.boxstr.com Nếu bạn muốn kiếm thêm, hãy vào trang sau: http://freewebspace.net * Bonus 3: Đối với Yahoo Plus, bạn vẫn dùng được JW Player nhưng chỉ có thể sử dụng như phần hướng dẫn 3 & 4 mà thôi, còn không áp dụng được theo hướng dẫn ở phần 5 & 6. Thêm một yêu cầu nữa là file flash player.swf bắt buộc bạn phải upload lên http://imageshack.us , lấy link rồi thay vào các code trên mới có thể chèn vào Yahoo Plus. Đây là link tớ upload lên imageshack.us cho các bạn, không còn logo của JW Player Chúc vui vẻ và enjoy với JW Player
Tin mới hơn:
Tin cũ hơn:
|




















