Thường thì ta nhứng video trên YouTube, Vmeo...vào Blog ta sử dụng luôn code của các dịch vụ cung cấp. Nếu nhúng nhiều sẽ trở nên nhàm chán với giao diện Player của các dịch vụ này. Để khắc phục, các bạn nên thỉnh thoảng sử dụng giao diện JW Player để thay "món ăn" cho độc giả.
Dùng JW Player, các bạn có thể thay đổi được giao diện trình chơi video (nhạc).Cụ thể là ta có thể thay đổi giao diện của bảng điều khiển trình chơi. Nếu nhúng video(nhạc) riêng lẻ thì không thấy khác biệt lắm nhưng lúc nhúng videoplaylist hay musicplaylist thì các bạn sẽ thấy khác nhau xa về giao diện trình chơi.
Về phần nhúng videoplaylist hay musicplaylist sử dụng JW Player, tôi sẽ chia sẻ với các bạn lần sau. Vì làm videoplaylist hay musicplaylist các bạn phải tạo được file playlist.xml (Chứa các video hay bản nhạc) và fileconfig.xml (tập hợp các điều khiển trình chơi)- hơi mất công tý !
Hôm nay tôi chỉ chia sẽ với các bạn chèn video(nhạc) riêng lẻ vào JW Player để nhúng vào Blog thôi.
Hôm nay tôi chỉ chia sẽ với các bạn chèn video(nhạc) riêng lẻ vào JW Player để nhúng vào Blog thôi.
Để làm được việc này các bạn có thể tải JW Player ở cuối bài đăng. Tải xong về các bạn giải nén để có các skin khác nhau của JW Player. Sau đấy các bạn tải lên HOST (DropBox, Google Drive..) để lấy link thay trong code mẫu tôi cho bên dưới. Link của video các bạn có thể dùng link của nó trên YouTube hay Vmeo. Còn nếu tải lên host riêng của mình, các bạn phải tải lên cùng thư mục với các JW Player thì code nhúng mới hoạt động. Link của video trên YouTube phải là link trên thanh địa chỉ của trình duyệt khi bạn mở video đó ra hoặc là link share !
Các bạn dùng đoạn code mẫu sau
<center><embed width="600" height="450" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player.swf" flashvars="skin= LINK JW PLAYER &backcolor=5FFB17&frontcolor=FF0000& lightcolor =7D2252&image= LINK ẢNH NỀN &logo= LINK LOGO &file= LINK VIDEO (NHẠC)&smoothing=1&controlbar=over&volume=80" allowfullscreen="true"></embed></center>
Giải thích Code
- Các bạn thay link của ảnh nền, ảnh Logo, video vào các chỗ tương ứng trong code trên 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.
- 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
- 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
- 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ề code các mã màu các bạn có thể vào đây để chọn màu mình thích để thay đổi trong code mẫu trên (kích vào BẢNG MÃ MÀU để chọn)
Bạn nên lưu ý là trước mỗi biến thêm vào phải thay & ở code mẫu trên bằng & (tham khảo ở phần những biến tôi đã thêm vào) và các biến này nằm sau phần flashvars= nhé thì code mới hoạt động !
- 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
- Về video, JW Player hỗ trợ 2 định dạng: FLV & MP4
Với sử dụng code mẫu trên và đưa vào một số biến mình cần tôi đã đưa 1 video của mình vào JW Player rồi nhúng vào Blog như sau:
Còn đây là nhúng videoplaylist - gồm 2 videos với JWP (kích lần lượt vào Nút tam giác dể mở video)
Tải các JW Player
Đối với JW Player thì bạn có thể chèn vào blog bằng mã Scripts hoặc với code Embed, ở đây mình chỉ hướng dẫn bạn sử dụng mã embed vì nó đơn giản để giúp bạn dễ hiểu hơn. Nếu bạn muốn biết rỏ hơn có thể tìm hiểu thêm tại đây. Bạn có thể vào đây xây dụng JW Player và lấy code hoặc có thể xem code embed như bên dưới:
<embed width="515" height="400" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player4.7.swf"flashvars="logo=http://www.traidatmui.everywebspace.com/image/logolist.png&image=http://www.traidatmui.everywebspace.com/image/logoclip.png&skin=http://www.longtailvideo.com/files/skins/metarby10/4/metarby10.swf&file=http://www14.nhac.vui.vn:8008/uploadmusic/1a0054c9d265209a19a5fc395b2272c0/4dba663e/uploadmusic/id_le/1-2011/Hungnk/Nam2011/VideoNhacViet/TongHop/EmKhongLaGi-DuyAnh.flv&stretching=exactfit&screencolor=0x444444" allowfullscreen="true">
</embed>
Trong code ở trên có phần flash (.swf) bạn có thể tải về máy tại đây và upload nó lên host riêng của mình, hoặc có thể sử dụng bằng link cung cấp bởi longtailvideo.com như ở trênhttp://player.longtailvideo.com/player4.7.swf.</embed>
Để có thể xây dựng chương trình này hoàn thiện hơn, trước hết bạn cần biết về một số biến của nó, bạn có thể xem tại đây. Bên dưới mình chỉ giới thiệu một số biến cơ bản cơ bản. Các biến sẽ được chèn vào ở phần flashvars và mỗi biến được ghép với nhau bằng &.
Các biến cơ bản của JW Player
- File: Chính là link file mà bạn muốn chạy trong chương trình, ví dụ:
file=http://www14.nhac.vui.vn:8008/uploadmusic/1a0054c9d265209a19a5fc395b2272c0/4dba663e/uploadmusic/id_le/1-2011/Hungnk/Nam2011/VideoNhacViet/TongHop/EmKhongLaGi-DuyAnh.flv hoặcfile=http://stylevn.com/nhacviet/download-song/IW6EZOWW/cryvn.mp3.
- Image: là link ảnh bạn muốn hiển thị trên màn hình JW Player.
image=http://www.traidatmui.everywebspace.com/image/logoclip.png
- Skin: phần này sẽ có thể giúp bạn thay vỏ bọc cho JW Player này, nếu bạn muốn chương trình trông đẹp hơn thì có thể chọn skin cho nó tại đây sau khi download về bạn upload file Flash (*.swf) lên host và lấy link thay vào skin như code ở trên.
skin=http://www.longtailvideo.com/files/skins/metarby10/4/metarby10.swf
- Logo: nếu bạn muốn chương trình mang dáng vẻ riêng của bạn bạn muốn hiển thị logo trong chương trình thì bạn thay link ảnh logo của bạn tại đây, logo sẽ hiển thị ở góc phải phía trên màn hình JW Player.
ví dụ: logo=http://www.traidatmui.everywebspace.com/image/logolist.png
- 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 của thanh navigation.
- 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=0xfffffff&frontcolor=0x000000&lightcolor=0x66cc00
thì JW Player sẽ có màu nền trắng (ffffff), các nút và text có màu đen (000000), khi rê chuột vào sẽ biến thành màu xanh lá cây (66cc00). Nếu bạn không biết rỏ mã màu bạn có thể xem tại đây.
- Controlbar: đây chính là thanh điều khiển của JW Player bao gồm các nút như Play, Stop, Volume, fullscreen... 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ị bằng các thuộc tính controlbar=over: tự động ẩn khi bạn chơi nhạc hay xem video;controlbar=top: hiển thị ở 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 hiển thị thì có thể thêm vào biến icon=0 (0 hoặc false = tắt, 1 hoặc true = bật)
- Playlist và playlistsize: đây là phần sẽ giúp bạn chèn list nhạc hay video và kích thước của list trong chương trình. Phần playlist này mình sẽ nói rỏ hơn bên dưới,
- Displayclick: khi bạn click chuột vào màn hình JW Player, nó sẽ play, stop... mặc định là Play.
- Autostart: bạn có thể cài đặt chương trình tự động chạy hoặc không ở biến này, nếu autostart=1 hoặc autostart=true thì tự động chạy và autostart=false sẽ không tự động chạy.
- Repeat: biến quy định lặp lại hay không lặp lại khi chơi nhạc hay video.
- Shuffle: biến quy định chới nhạc ngẫu nhiên khi bạn chơi nhạc dạng list; shuffle=1 hoặc shuffle=true là chơi ngẫu nhiên shuffle=false là không.
- 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 smoothing=1 hoặc smoothing=true
- Stretching: co dãn ảnh hiển thị (image ở trên) ở màn hình JW Player, mặc định stretching=uniform, bạn có thể thay thành stretching=fill hoặc stretching=exactfit
- Volume: tùy chỉnh âm lượng, volume=0: tắt tiếng, volume=100: âm thanh lớn nhất.
Nếu bạn muốn phần biến của bạn gọn hơn thì có thể tạo file config.xml và đưa vào biến ở phần flashvars, bạn mở Notepad và dán vào code bên dưới.
<config>
<quality>true</quality>
<author>traidatmui.com</author>
<skin>http://www.longtailvideo.com/files/skins/metarby10/4/metarby10.swf</skin>
<image>http://www.traidatmui.everywebspace.com/image/logoclip.png</image>
<backcolor>#ffffff</backcolor>
<frontcolor>#ffffff</frontcolor>
<lightcolor>#66cc00</lightcolor>
<screencolor>#444444</screencolor>
<controlbar>bottom</controlbar>
<repeat>list</repeat>-->
<plugins>timeslidertooltipplugin-1</plugins>
<smoothing>1</smoothing>
<autostart>0</autostart>
<shuffle>1</shuffle>
<volume>90</volume>
<stretching>exactfit</stretching>
</config>
<quality>true</quality>
<author>traidatmui.com</author>
<skin>http://www.longtailvideo.com/files/skins/metarby10/4/metarby10.swf</skin>
<image>http://www.traidatmui.everywebspace.com/image/logoclip.png</image>
<backcolor>#ffffff</backcolor>
<frontcolor>#ffffff</frontcolor>
<lightcolor>#66cc00</lightcolor>
<screencolor>#444444</screencolor>
<controlbar>bottom</controlbar>
<repeat>list</repeat>-->
<plugins>timeslidertooltipplugin-1</plugins>
<smoothing>1</smoothing>
<autostart>0</autostart>
<shuffle>1</shuffle>
<volume>90</volume>
<stretching>exactfit</stretching>
</config>
Bạn có thể tùy chỉnh các biến theo ý mình sau đó save lại với tên config.xml sau đó upload lên host để lấy link. Lưu ý đối với cách này thì bạn cần upload config.xml này và file flash (player4.7.swf) ở trên vào cùng thư mục thì nó mới hoạt động được. Sau đó bạn chèn vào code embed như bên dưới.
<embed width="515" height="400" type="application/x-shockwave-flash" src="player4.7.swf" flashvars="config=config.xml&file=http://www14.nhac.vui.vn:8008/uploadmusic/1a0054c9d265209a19a5fc395b2272c0/4dba663e/uploadmusic/id_le/1-2011/Hungnk/Nam2011/VideoNhacViet/TongHop/EmKhongLaGi-DuyAnh.flv" allowfullscreen="true">
</embed>
</embed>
Bạn thay player4.7.swf và config.xml thành link tương ứng mà bạn upload lên host của bạn.
B. Tạo Playlist và chèn vào code Embed
Ở code trên mình sử dụng để chạy 1 bài nhạc hay 1 file video, bạn có thể thay link ở phầnfile=http://www14.nhac.vui.vn:8008/uploadmusic/1a0054c9d265209a19a5fc395b2272c0/4dba663e/uploadmusic/id_le/1-2011/Hungnk/Nam2011/VideoNhacViet/TongHop/EmKhongLaGi-DuyAnh.flv thành link bài hát hay link video của bạn. Và làm sao để có thể tạo được list nhạc cho chương trình JW Player này. Để tạo Playlist đầu tiên bạn phải có link của các bài hát hay video mà bạn muốn đưa vào list này (vi dụ:http://stylevn.com/nhacviet/download-song/IW6EZOWW/cryvn.mp3). Sau khi đã có link bài hát hay video, bạn mở Notepad lên và dán vào code bên dưới.
<?xml version='1.0' encoding='UTF-8'?>
<playlist >
<tracklist>
<track>
<title>Tiêu đề bài hát 1</title>
<annotation>Mô tả 1</annotation>
<location>Link bài hát hay video 1 (ví dụ:http://stylevn.com/nhacviet/download-song/IW6EZOWW/cryvn.mp3)</location>
<image>Link ảnh của bài hát (nếu có), bạn có thể bỏ phần này nếu không muốn hiển thị ảnh</image>
</track>
<track>
<title>Tiêu đề bài hát 2</title>
<annotation>Mô tả 2</annotation>
<location>Link bài hát hay video 2</location>
<image>Link ảnh của bài hát (nếu có), bạn có thể bỏ phần này nếu không muốn hiển thị ảnh</image>
</track>
</tracklist>
</playlist>
<playlist >
<tracklist>
<track>
<title>Tiêu đề bài hát 1</title>
<annotation>Mô tả 1</annotation>
<location>Link bài hát hay video 1 (ví dụ:http://stylevn.com/nhacviet/download-song/IW6EZOWW/cryvn.mp3)</location>
<image>Link ảnh của bài hát (nếu có), bạn có thể bỏ phần này nếu không muốn hiển thị ảnh</image>
</track>
<track>
<title>Tiêu đề bài hát 2</title>
<annotation>Mô tả 2</annotation>
<location>Link bài hát hay video 2</location>
<image>Link ảnh của bài hát (nếu có), bạn có thể bỏ phần này nếu không muốn hiển thị ảnh</image>
</track>
</tracklist>
</playlist>
Hình ảnh minh họa
Ở trên mỗi <track></track> là một bài hát hay video, bạn thay các phần tương ứng, sau khi đã có các bài hát trong list này bây giờ bạn hãy save file này lại có phần mở rộng là XML, ví dụ save với tên lạiplaylist.xml. Chú ý phần Encoding bạn chọn UTF-8
Bây giờ bạn hãy upload file playlist.xml lên host và lấy link sau đó chèn vào phần file của code Embed như bên dưới.
<embed width="515" height="400" type="application/x-shockwave-flash" src="http://player.longtailvideo.com/player4.7.swf" flashvars="logo=http://www.traidatmui.everywebspace.com/image/logolist.png&image=http://www.traidatmui.everywebspace.com/image/logoclip.png&skin=http://www.longtailvideo.com/files/skins/metarby10/4/metarby10.swf&file=playlist.xml&stretching=exactfit&screencolor=0x444444&playlist=bottom&playlistsize=80" allowfullscreen="true">
</embed>
</embed>
Chúc bạn thành công
0 nhận xét:
Post a Comment