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 sengihnampakgigi (Bài này tớ viết rất dài và nhúng nhiều flash minh họa nên nếu load bài không thấy flash minh họa, bạn nhớ refesh vài lần để load cho hết. Còn refresh mãi mà flash không ra thì host chứa file nó bị đơ hoặc hết bandwidth, đợi lúc khác xem lại )

» Giới thiệu sơ qua về JW Player:

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,.... đặc biệt là các trang phim hiện nay tất cả họ đều dùng chương trình này để phát các video hoặc các bài nhạc.

- Các bạn có thể truy cập vào trang chủ của họ theo link bên dưới:
- Các định dạng được JW Player hỗ trợ:
  • 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
- Giao diện khi chưa được tùy biến bởi người dùng: JW Player có giao diện gốc rất đơn giản:
Demo Code Tự Động Chạy
::--> Bạn đang xem Video Demo blog http://namkna.blogspot.com/ --::-- Xin vui lòng nhấn nút Comment để đưa ra những thắc mắc và phản hồi. Chúc bạn có được những giây phúc thư giãn vui vẻ tại đây... :) |
Demo Không tự động chạy
::--> Bạn đang xem Video Demo blog http://namkna.blogspot.com/ --::-- Xin vui lòng nhấn nút Comment để đưa ra những thắc mắc và phản hồi. Chúc bạn có được những giây phúc thư giãn vui vẻ tại đây... :) |
- 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...

»  Tải JW Player  bản mới nhất

Bạn có thể download JW Player bản mới nhất version mới nhất ở đây:

- Trước khi download, bạn nhớ bỏ dấu tích ở ô lựa chọn Include the JW Viral Plugin (Trong trường hợp bạn muốn hiển thị chia sẻ code của file mp3 hay video để người khác có thể copy trực tiếp khi xem ở blog thì bạn hãy chọn Include the JW Viral Plugin).

- Trong file zip tải về, giải nén ra bạn chỉ cần lấy file player.swf. Sau đó upload file player.swf lên host free hay những website lưu trữ trực tuyến cho dùng link trực tiếp để tiện dùng. Nếu bạn nào không biết dùng host để quản lý và upload thì có thể tìm hiểu các bài viết khác tại phần này của mình: Các host lưu trữ cho redirect link . (Hiện nay được dùng phổ biến nhất là host Google drive mà mình đã từng giới thiệu.).

Bạn cũng có thể lợi dụng dùng luôn JW Player trực tiếp từ trang chủ theo link này:

» Hướng dẫn sử dụng JW Player để tạo một trang phim chuyên nghiệp

Bây giờ tới phần hướng dẫn các bạn dùng JW Player để chèn nhạc và video vào blog của mình. Chúng ta sẽ đi từ các bước đơn giản cho tới nâng cao

1. Code tổng quát
2. Các biến của JW Player
3. Code cơ bản - Chèn 1 bản nhạc hay 1 file video vào blog.
4. Code nâng cao - Tùy biến JW Player theo ý bạn
5. Code nâng cao - dùng file điều khiển xml thay thế.
6. Code nâng cao - Chèn 1 list nhạc & video vào blog.
7. Bonus (phần này hay à nha. Các bạn nhớ coi mục này đó, chớ bỏ phí ihikhik setan)

Sau đây chúng ta sẽ cùn nhau đi tìm hiểu lần lượt các bước ở bên trên nha:

» Phần I:  Code tổng quát

Code tổng quát để chèn JW Player vào blog dạng sau:
<embed width="400" height="330" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player.swf" flashvars="effect.xml"></embed>
» Trong đó:

  • width="400": là chiều rộng của file flash, bạn có thể đặt theo ý bạn. 
  • height="330" là chiều caocủa 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.
  • http://player.longtailvideo.com/player.swf là 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ủ này.
  • flashvars="effect.xml": đây chính là phần khai báo kết hợp các biến để tùy biến giao diện của JW Player hoạt động theo ý bạn.

» Phần 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:
Trong trang đó, Bạn chỉ cần quan tâm tới 3 phần:
  • File properties: các biến khai báo file nhạc hay video bạn cần nhúng vào blog
  • Layout: các biến khai báo giao diện cho JW Player
  • Behaviour: các biến quy định cách thức chơi nhạc hay video.
Ở đây namkna sẽ nói 1 số các biến chính đủ dùng cho blog
Khi khai báo các biến vào đằng sau lệnh flashvars thì các biến được kết hợp với nhau thông qua ký tự &.Tuy nhiên đối với blogspot, bạn phải đổi ký tự & thành &amp; thì mới dùng được.

a. File properties:
* file: khao báo đường dẫn file music hay video ví dụ linh video ở bên dưới:
file=http://www.youtube.com/watch?v=47ZPg7TuSq0
* image: khai báo file ảnh bạn muốn hiển thị trên màn hình JW Player. ví dụ như k hai báo hình ảnh ở bên dưới: 
image=http://i1183.photobucket.com/albums/x467/namkna/SkinJLW-namkna.png

b. Layout:
* skin: đây chính là biến dùng để bạn lột xác cho JW Player của mình có bộ cánh đẹp hơn, bạn có thể vào đây lấy các skin cho JW Player:
- 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ủ, Dưới đây là 4 skin từ trang chủ mình giới thiệu đến cho các bạn:

Chọn được skin ưng ý ban chỉ cần thêm nó vào mã khai báo như bên dưới:
skin=http://www.longtailvideo.com/files/skins/snel.swf

* logo: Đây là phần sẽ hiển thị ở góc phải phía trên màn hình JW Player của video, phần này hầu như trang phim nào cũng áp dụng nó,ví dụ: Ảnh này

* backcolor: chỉnh màu nền của playlist và nền phía sau của các nút điều khiển

* fontcolor: chỉnhmàu của các nút điều khiển và chữ hiển thị trong playlist

* lightcolor: chỉnh màu hiển thị khi bạn rê chuột vào các nút lệnh hay text trong playlist
ví dụ: 
backcolor=fff&frontcolor=000&lightcolor=6c0

Trong doạn code trên, thì JW Player sẽ có màu nền trắng (fff), các nút và text có màu đen (000), khi rê chuột vào sẽ biến thành màu xanh lá cây (6c0). Bạn có thể tham khảo mã màu ở trang sau : Trang lấy mã màu.

* 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... mặc định sẽ là ở vị trí dưới cùng, bạn có thể thay đổi theo ý như tự động ẩn hoặc trên cùng hoặc không hiển thị. ví dụ:
  • controlbar=over: thanh điều khiển sẽ tự động ẩn khi bạn chơi nhạc hay xem video.
  • controlbar=top: thanh điều khiển ở vị trí trên cùng.

 * icons: cho phép hiển thị các biểu tượng của các nút lệnh trên màn hình JW Player, mặc định là hiển thị. Nếu bạn không muốn nó hiển thị trên màn hình của JW Player thì bạn có thể giấu nó đi bằng cách khai báo icons=0 hoặc icons=true (0 hoặc false = tắt, 1 hoặc true = bật)

* playlist và playlistsize: định nghĩa playlist trong trường hợp bạn muốn chèn 1 danh sách bài nhạc hay video (sẽ nói ở phần 5)

c. Behaviour:
* displayclick: khi bạn click chuột vào màn hình JW Player, nó sẽ chơi, tạm dừng, câm tiếng... mặc định là Play. ví dụ: displayclick=none: sẽ không thực hiện lệnh nào khi click chuột vào màn hình JW Player

* 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 autostart=1 hoặc autostart=true

* repeat: lặp lại tiến trình chơi nhạc. ví dụ: repeat=list: lặp lại 1 lần toàn bộ list nhạc

* 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). ví dụ: shuffle=1 hoặc shuffle=true

* 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.ví dụ: smoothing=1 hoặc smoothing=true

* 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% ví dụ: volume=0: câm tiếng volume=100: âm thanh to hết cỡ.

Hình minh họa một số biến bạn có thể thấy ở giao diện JW Player: 
Dùng JW Player đưa nhạc và video vào blogspot

» Phần 3. Code cơ bản chèn một đoạn nhạc hay một đoạn video bằng JW Player:

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 &amp; thì blogspot mới hiểu được (cái này blogspot dốt hơn thằng gelakguling gatai). Namkna sẽ bôi đậm &amp; để bạn dễ phân biệt giữa các biến với nhau.

a. Chèn nhạc:

<embed width="400" height="320" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player.swf" flashvars="http://i1183.photobucket.com/albums/x467/namkna/SkinJLW-namkna.png&amp;file=https://googledrive.com/host/0B3dG7nf_AK5mMVZyZVRYQ05BRU0"></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://i1183.photobucket.com/albums/x467/namkna/SkinJLW-namkna.png&amp;file=http://www.youtube.com/watch?v=47ZPg7TuSq0&amp;smoothing=1" allowfullscreen="true"></embed>

Xem Video Demo
::--> Bạn đang xem Video Demo blog http://namkna.blogspot.com/ --::-- Xin vui lòng nhấn nút Comment để đưa ra những thắc mắc và phản hồi. Chúc bạn có được những giây phúc thư giãn vui vẻ tại đây... :) |
2 code trên sử dụng skin mặc định đơn giản, hiển thị ảnh ở màn hình JW Player. Ảnh tớ chèn có kích cỡ width=400, nhưng ở phần khai báo đầu tiên height="320" là bạn nên cộng thêm chiều cao của thanh điều khiển controlbar để hiển thị ảnh cho chuẩn. Tùy từng skin mà thanh này có chiều cao khác nhau. Nếu bạn dùng skin mặc định thì chiều cao thanh điều khiển cỡ 20px mà thôi, skin Sneil thì thanh điều khiển có chiều cao cỡ 30px. Nếu bạn thiết lập thanh điều khiển ở chế độ tự động ẩn thì chỉ việc đặt chiều cao bằng chiều cao của ảnh chèn vào. Còn nếu bạn ngại tính toán thì đưa biến stretching vào để nó tự động co dãn ảnh căng toàn màn hình JW Player. Điều này cũng sẽ ảnh hưởng tới tỉ lệ ảnh khung hình video nếu là file video Hình minh họa:
Dùng JW Player đưa nhạc và video vào blogspot
- 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 đủ.

» Phần 4. Code nâng cao - Tùy biến JW Player theo ý bạn: 

- Giờ bạn muốn tùy biến như thay skin, đổi màu các nút, tự động chơi nhạc, ẩn thanh điều khiển vv... thì bạn chỉ việc thêm các biến như ở phần 2 vào mà thôi.

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&amp;backcolor=fffffff&amp;frontcolor=000000&amp;lightcolor=66cc00&amp;image=http://i1183.photobucket.com/albums/x467/namkna/SkinJLW-namkna.png&amp;logo=http://i1183.photobucket.com/albums/x467/namkna/logo-namkna-blogspot.png&amp;file=https://googledrive.com/host/0B3dG7nf_AK5mMVZyZVRYQ05BRU0&amp;autostart=1&amp;icons=0&amp;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&amp;logo=http://i1183.photobucket.com/albums/x467/namkna/logo-namkna-blogspot.png&amp;image=http://i1183.photobucket.com/albums/x467/namkna/SkinJLW-namkna.png&amp;file=http://www.youtube.com/watch?v=47ZPg7TuSq0&amp;smoothing=1&amp;controlbar=over" allowfullscreen="true"></embed>
::--> Bạn đang xem Video Demo blog http://namkna.blogspot.com/ --::-- Xin vui lòng nhấn nút Comment để đưa ra những thắc mắc và phản hồi. Chúc bạn có được những giây phúc thư giãn vui vẻ tại đây... :) |

» Phần 5. Code nâng cao - dùng file điều khiển xml thay thế: 

Qua phần 3 & 4 bạn đã hiểu về khai báo biến sau lệnh flashvars. Nhưng nếu bạn tùy biến càng nhiều thì code càng dài, rất khó nhìn để phân biệt, làm bạn lẫn lộn. Hơn nữa viết bài nhiều mà mỗi lần chèn lại phải nhớ lại các biến cũng đau hết cả sọ dừa nên để code dễ nhìn và gọn gàng, bạn có thể đưa toàn bộ các biến đó vào 1 file xml cho gọn, ví dụ config.xml rồi khai báo file điều khiển này trong lệnh flashvars. Cách tạo file config.xml như sau: Bạn dùng notepad tạo 1 file txt, ví dụ config.txt. Copy đoạn code dưới và paste vào:
<config>
<quality>true</quality> <skin>http://www.longtailvideo.com/files/skins/snel.swf</skin> <logo>http://i1183.photobucket.com/albums/x467/namkna/logo-namkna-blogspot.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

Dùng JW Player đưa nhạc và video vào blogspot
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&amp;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&amp;file=http://hpbox.425mb.com/media/video/vediem.mp4&amp;volume=100" allowfullscreen="true"></embed>



6. Code nâng cao - Chèn 1 list nhạc & video vào blog: Nếu bạn muốn chèn nhiều bài hát lẫn video vào thì JW Player cũng sẽ giúp bạn toại nguyện luôn. Danh sách các file cần đưa vào playlist sẽ ở định dạng xml a. Tạo playlist: Để tạo danh sách bài hát hay video thì các bạn có thể dùng notepad để tạo. Code tạo playlist như sau: 
<?xml version='1.0' encoding='UTF-8'?>
<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://i1183.photobucket.com/albums/x467/namkna/SkinJLW-namkna.png</image>
<info>http://huypham.tk/</info>
</track>
</tracklist>
</playlist>
Phần <?xml version='1.0' encoding='UTF-8'?> để 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&amp;file=http://hpbox.425mb.com/media/jwplayer/playlist.xml&amp;playlistsize=60&amp;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 - playlist=bottom: đặt playplist hiển thị phía dưới controlbar, nếu bạn thích hiển thị bên phải, hãy đổi bottom thành right - playlistsize=60: đặt chiều cao của playlist, bạn có thể thay đổi tùy ý. Nếu bạn muốn chơi các bài ngẫu nhiên không theo thứ tự thì khai báo thêm biến: shuffle=1 vào trực tiếp đoạn code trên hoặc đưa vào file config.xml
7. Bonus: Sau khi đọc hết 6 phần trên, chắc các bạn cũng hoa cả mắt gile(mà mình viết tới đây cũng oải quá trời luôn adusangkatkening nangih) Giờ là bonus cho các bạn: 
* Bonus 1:Khi bạn download jwplayer từ trang chủ để dùng và trong các code minh họa của tớ ở các phần trên, nếu bạn copy và test ở blog của bạn, mỗi lần chơi nhạc hay video bạn sẽ thấy 1 logo mang chữ jwplayer hiện lên ở góc trái phía dưới vài giây rồi mới biến mất 
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 peace Đơn giản là vì tớ đã hack file player.swf và cho cái logo đó biến mất vĩnh viễn luôn  setan các chức năng khác của JW Player vẫn nguyên si không có gì thay đổi. Nếu bạn thích dùng thì có thể dowload nó ở đây:
* 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 flashplayer.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 : http://img40.imageshack.us/img40/7783/jwplayerz.swf
Chúc vui vẻ và enjoy với JW Player sengihnampakgigi peluk