Chế tạo player bằng đồ thuật online

by carolinejudith Sat Oct 01, 2011 5:32 pm

Chế tạo player bằng đồ thuật online

JWPLAYER là hãng viết player flash rất lớn. Nhiều website thương mại đã mua lại player này. Bạn được dùng free vì bạn chỉ post lên blog, lên 4rum hay trên website cá nhân.
Lúc trước tôi có viết bộ code mẫu cho player này (bài Lồng Hình vào Video https://ngaothiduong.forumvi.com/t2199p8-topic#4674 ). Nhưng nếu bạn sử dụng đồ thuật của chính hãng thì bạn sẽ khai thác được nhiều tính năng hơn và - quan trọng nhất- bạn được học hỏi về cách tạo tham biến cho 1 shockware theo cách có bài bản và có tổ chức. Tóm lại, bạn được đào luyện một kỹ năng cơ bản về kỹ thuật sử dụng 1 flash player. Thay vì bạn chỉ lấy code mẫu trồi làm theo hướng dẫn cách dùng mà không biết mình đang làm gì.
Trong topic này tôi sẽ lần lượt dẫn bạn khai thác từng bước của đồ thuật, mỗi bài sẽ cố gắng giảng rõ nhưng gì bạn có thể làm và có thể nhận.

Bài 1: Chẩn Bị Sử dụng Đồ Thuật

A- Kiến Thức Tổng Quát:

1- Bạn cần định hướng về đối tượng mà bạn muốn phục vụ người xem. Đối tượng là: audio nhạc đơn, video clip đơn, audio playlist, video playlist. Từ 4 đối tượng, bạn sẽ chọn đồ thuật trong 20 cái thích hợp.
2- Bạn cần có những phương tiện để đem vào player:
- Ít nhất cũng có đường dẫn của đối tượng là đường dẫn MP3, FLV hay MP4.
- Cần hình dung trong đầu dimension (tức tham số width và height) của player
- Có đường dẫn hình (và size của hình).
- Có đường dẫn file XML nếu bạn muốn nhúng playlist
3- Cần xác định page mà bạn muốn nhúng hỗ trợ gì:
- Webpage hỗ trợ tất cả các code dùng cho html
- Diễn đàn và blog không hỗ trợ JavaScript. Bạn phải chuyển code Java script thành code nhúng.
- 360Plus không hỗ trợ thẻ nhúng flash ngoài flash có đường dẫn iXXX.photobucket.com/ (sau i là 3 chữ số). Do đó bạn phải dùng loader để nhúng player.

B- Đồ Thuật Tiêu Biểu

Bạn hãy truy cập địa chỉ sau đây.
http://www.longtailvideo.com/support/jw-player-setup-wizard-4

Trang này trình bày 1 đồ thuật để nhúng 1 video clip đơn có lồng hình. Hiển thị của đồ thuật như sau:

Ở vùng số 1. Bạn bật menu thả để chọn đồ thuật tương ứng với đối tượng muốn nhúng và với phương tiện sẵn có. Đây là đồ thuật đầu tiên của danh sách.

Sang bài sau bạn sẽ khai thác các chức năng còn lại của đồ thuật này.

-CAROLINE JUDITH-

by carolinejudith Sat Oct 01, 2011 5:41 pm

Bài 2: Thay đổi Tham biến

Bạn hãy chuyển xuống vùng số 2
Các flashvars mặc định sẽ được bạn thay đổi ở mục này

1- Tiểu mục Embed Parametters

- Source: Của website là ~~http://player.longtailvideo.com/player4.6.swf~~ . Nhưng nó hiện không hiệu lực. Bạn hãy ghi chồng lên đó player của tôi. Bạn có thể download về rồi upload lên host của bạn. Sau này bạn sẽ chỉ dùng player của bạn mà thôi. Đường dẫn file của tôi là http://img193.imageshack.us/img193/1797/onlymeplayer.swf .
- Height: Giá trị mặc định là 320. Tùy theo thiết kế trang và tùy hình lồng vào mà bạn viết lại.
- Width: Giá trị mặc định là 470. Tùy theo thiết kế trang và tùy hình lồng vào mà bạn viết lại. Bạn viết lại là 420 (theo cỡ hình mà tôi sẽ làm ví dụ)

2- Tiểu mục Playlist

- Playlist file: Ghi đường dẫn mặc định của file XML. Cách viết file này tôi sẽ hướng dẫn sau. Mặc định để trống (vì bạn đang nhúng clip đơn)

3- Tiểu mục File Properties: Tiểu mục này chứa các tên tham biến mà bạn sẽ viết vào thẻ nhúng

- author: tên tác giả. Bạn có thể viết vào hoặc không. Mặc định không.
- description: dòng mô tả clip. Bạn có thể viết vào hoặc không. Mặc định không.
- duration: thời gian clip chạy tính bằng giây. Bạn có thể viết vào hoặc không. Mặc định không.
- file: đây là toán tử nhúng. Bạn phải viết đường dẫn tuyệt đối của clip vào. Mặc định của ví dụ là: http://player.longtailvideo.com/player.swf (Hoặc bằng đường dẫn bài "Giọt Sương Trên Mí Mắt - TCS - Hồng Nhung" http://www.fileden.com/files/2009/8/26/2555918/GiotSuongTrenMiMat.flv ). Các định dạng (audio và video) được hỗ trợ là: 3gp, 3g2, flv, mp4, f4v, mov, m4a, m4b, f4a, f4b, m4v, mp3, ogg, aac, ogv, m3u8,
- image: đây là tham biến hình lồng vào video. Hình sẽ mất đi khi video chạy. Bạn có thể viết vào hoặc không. Nếu có hình, bạn viết đường dẫn tuyệt đối của hình vào. Mặc định của ví dụ là: http://content.longtailvideo.com/videos/flvplayer.jpg ((Hoặc bằng đường dẫn hình của tôi http://www.fileden.com/files/2009/8/26/2555918//DoiCoTrang.jpg). Các định dạng được hỗ trợ là: jpeg, jpg, swf,
- start: Bắt đầu play sau bao nhiêu giây lệnh play được kích hoạt. Lệnh này được kích hoạt hoặc bằng giá trị autoplay=yes hoặc bằng cách click lên nút Play. Bạn có thể viết vào hoặc không. Mặc định không.
- title: tên của clip. Bạn có thể viết vào hoặc không. Mặc định không.
- provider: tên nhà sản xuất clip. Bạn có thể viết vào hoặc không. Mặc định không.

Đến đây, bạn bắt đầu có các tham biến quan trọng nhất của thẻ nhúng: width="470" height="320" src="http://img193.imageshack.us/img193/1797/onlymeplayer.swf?file=http://www.fileden.com/files/2009/8/26/2555918/GiotSuongTrenMiMat.flv&image=http://www.fileden.com/files/2009/8/26/2555918//DoiCoTrang.jpg"

Tuy nhiên bạn chưa thể viết code nhúng.
Trong bài kế bạn sẽ tiếp tục đồ thuật để chỉ định các tham số quan trọng khác của player này

-CAROLINE JUDITH-

by carolinejudith Sat Oct 01, 2011 5:46 pm

Bài 3: Những tham số điều khiển

Bây giờ chuyển xuống các tiểu mục kế tiếp

4- Tiểu mục colors: để chỉ định màu cho player

- backcolor: màu nền của player. Nếu không viết mã được thì bạn bấm vào ô màu để thấy bảng màu rồi bấm chọn 1 màu.
- frontcolor: màu chữ trên player. Nếu không viết mã được thì bạn bấm vào ô màu để thấy bảng màu rồi bấm chọn 1 màu.
- lightcolor: là màu khi có chuột bên trên. Nếu không viết mã được thì bạn bấm vào ô màu để thấy bảng màu rồi bấm chọn 1 màu.
- screencolor: là màu cùa khung display. Nếu không viết mã được thì bạn bấm vào ô màu để thấy bảng màu rồi bấm chọn 1 màu.
Nếu bạn không thay đổi gì thì player nhận các màu mặc định theo thứ tự là trắng-đen-đen-đen.

5- Tiểu mục Layout: để chỉ định cách thể hiện các thành phần trong player

- controlbar: để chỉ định vị trí của controlbar, tham biến thú vị.
* top là ở trên đỉnh khung display (hic, ít ai thích kiểu này)
* bottom: là bên dưới khung display (mặc định là thế). Nếu trong code nhúng bạn không thêm tham biến này vào thì player nhận giá trị này.
* over: là nổi bên trên khung display và không tự động ẩn khi play (hic, ai mà chịu. Phải để người ta xem video chứ)
* none: là không thấy controlbar. Người nghe nhạc chỉ còn cách bấm lên display để tắt mở nhạc.
- playlist: là vị trí của playlist. Nếu bạn nhúng playlist thì bạn mới thay đổi giá trị này
* none: mặc định không có playlist.
* bottom: bên dưới khung display (thường dùng cho list dọc)
* over: nổi trên bề mặt khung display
* right: bên phải khung display (thường dùng cho list ngang)
* left: bên trái khung display
* top: bên trên khung display
- playlistsize: Tham số này quan trọng khi bạn dùng list ngang (trái hay phải)
- dock: neo . Mặc định là true (có) , ngược lại là false (trôi nổi)
- skin: là "áo" cho player. Tôi có cung cấp 1 bảng player làm skin. Bạn hãy tham khảo bài Lồng Hình vào Video https://ngaothiduong.forumvi.com/t2199p8-topic#4674 .

6- Tiểu mục Behavior: Những tham biến điều khiển
- autostart: false (mặc định không) / true (có)
- bufferlength: thời gian tính bằng giây để tải file nhạc trước khi play. Nếu không rành thì không nên ghi vào
- icons: là các nút biểu tượng. Mặc định là true (có). Ngược lại là false (không).
- item: là chủ đề playlist. Mặc định không đề gì cả
- mute: là nút thinh lặng trên controlbar. Mặc định false (không xuất hiện), ngược lại là true (có ).
- quality: là chất lượng âm thanh. Mặc định là true (có), ngược lại là false (không)
- repeat: là chế độ lặp lại
* none: mặc định là không.
* list: hát lại list 1 lần
* always: hát lại hoài hoài.
- shuffle: chế độ play ngẫu nhiên. false: mặc định là không (hát theo thứ tự trong list), ngược lại là true (bạ đâu hát đó).
- stretching: thay đổi khung display theo hình video
* uniform: Giữ thống nhất dimension . Mặc định.
* Fill: theo dimension của video
* exactfit: chọn 1 chiều để lấp đầy. Chiều còn lại phải chịu khững khoảng đen
* None: không thay đổi dimension . Video có thể bị xén các chiều.
- volume: % âm lượng so với âm lượng gốc. Nếu không rành, bạn nên để trống.

7- Tiểu mục External Communication là các link sẽ dẫn đến.

- linktarget: khi bấm vào player sẽ chuyển đến trang của bạn. Có thì bạn ghi vào
- plugins: là các trình hỗ trợ. Nếu không biết bạn không ghi gì vào.
- streamer: là chương trình radio/TV. Nếu không biết bạn không ghi gì vào.

Như vậy là bạn đã đi hết đồ thuật. Trong bài kế, bạn sẽ nhận kết quả.

-CAROLINE JUDITH-

by carolinejudith Sat Oct 01, 2011 5:53 pm

Bài 4: Nhận kết quả.

Trước khi preview bạn hãy xem lại các đường dẫn quan trọng. Nếu chưa có, bạn hãy cho vào:

1- Tiểu mục Embed parameters:
- dòng source: bạn hãy xóa đường dẫn mặc định. Rồi nhập flash của tôi vào: http://img193.imageshack.us/img193/1797/onlymeplayer.swf
2- Tiểu mục File properties-
- dòng file: bạn nhập http://www.fileden.com/files/2009/8/26/2555918/GiotSuongTrenMiMat.flv
- dòng image: bạn nhập http://www.fileden.com/files/2009/8/26/2555918//DoiCoTrang.jpg
3- Tiểu mục Layout
- dòng skin: Bạn nhập http://img30.imageshack.us/img30/2844/metarby10.swf

Nếu đã đủ như thế thì bạn bấm nút "Update Preview & Code".

Ở vùng số 3 bên dưới bạn sẽ thấy player. Nếu bạn thấy như thế này thì bạn đã học được nhiều lắm
Chế tạo player bằng đồ thuật online LongtailTest

Chế tạo player bằng đồ thuật online LongtailTest

Bạn hãy thử các chức năng mà bạn chỉ định.

Nếu đã vừa ý. Bạn chép bộ code bên dưới player, ở vùng số 4: Copy Your Code. Code ấy như sau:

Đem paste vào diễn đàn bạn sẽ thấy player sẽ hiển thị như thế này:

Bạn hãy tham khảo bài Lồng Hình vào Video https://ngaothiduong.forumvi.com/t2199p8-topic#4674 để lấy code mẫu bằng thẻ embed vả học cách dùng.

Chúc bạn thành công

-CAROLINE JUDITH-

by carolinejudith Sat Oct 01, 2011 7:54 pm

Làm video List bằng JWPlayer

Bạn hãy vào đồ thuật
Ở vùng 1 bấm danh sách thả rồi chọn "flvplayer with an rss playlist" (mục thứ 6). Trang này trình bày 1 đồ thuật để nhúng 1 video clip playlist. Hiển thị của đồ thuật như sau:

A- Thao tác chuẩn bị

Nhưng trước khi thực hiện những thao tác trên đồ thuật bạn hãy download 2 file sau:
1- Flash: http://www.fileden.com/files/2011/8/4/3177804//onlymeplayer46.swf
2- XML: http://www.fileden.com/files/2011/8/4/3177804//mrss.xml

Bạn hãy sửa lại nội dung file XML rồi upload cả 2 file lên host của bạn
Bắt đầu khảo sát
Khảo sát đồ thuật, bạn thấy gần như không khác gì đồ thuật nhúng video đơn. Những điểm khác nhau là:
- width=height=470 (bạn có thể thay đổi)
- đường dẫn file xml (đường dẫn đầy đủ là http://www.longtailvideo.com/jw/upload/mrss.xml ) Nhưng bạn phải dùng đường dẫn của bạn, vì website bị lỗi accross domain.
- thêm tham số playlist=bottom
- không hỗ trợ lồng hình
- không hỗ trợ skin

B- Tạo code nhúng

Bạn hãy nhập như sau:
1- Tiểu mục Embed parameters:
- dòng source: bạn hãy xóa đường dẫn mặc định. Rồi nhập flash của tôi vào: http://www.fileden.com/files/2011/8/4/3177804//onlymeplayer46.swf
2- Tiểu mục File properties
- dòng file: bạn nhập XML của bạn . Của tôi là: http://www.fileden.com/files/2011/8/4/3177804//mrss.xml

Khi đã đủ như thế thì bạn bấm nút "Update Preview & Code". Nếu
Nếu thấy xuất hiện preview là đã được . Bạn hãy chuyển xuống vùng 4 rồi copy code.
Code ấy như sau:

Và player hiển thị như thế này

Chúc bạn thành công

-CAROLINE JUDITH-

by carolinejudith Sun Oct 02, 2011 11:26 am

JWPLAYER - 360PLUS
Bài này viết cho 360Plus

Rất hiếm bogger nhúng player của longtail vào 360Plus là vì khó khăn quá.
Muốn vào được Plus thì player cần flash tải. Trong khi chính bộ code nhúng của longtail thì hoặc sai cú pháp ở V4.6, hoặc lại mã hóa bằng JS ở V5.7, hoặc không thể tạo thử trên đồ thuật được vì lỗi cross domain.

Cách giải quyết cơ bản là tải 2 phiên bản flash về rồi upload lên 1 host khác sau đó viết thẻ embed để nhúng. Bạn có thể dùng đường dẫn phiên bản 5 của tôi

Vậy trước khi sử dụng JWPLAYER bạn hãy chép lại các đường dẫn cơ bản sau:
1- Flash nhúng media đơn: http://img193.imageshack.us/img193/1797/onlymeplayer.swf
2- Các flash tải . Bạn dùng cái nào cũng được.
- Của Hạ Tím: https://i702.photobucket.com/albums/ww28/hatim86uyennhi/hatimloading. swf?link=
- Của Chiplove: https://i173.photobucket.com/albums/w49/chiplove9xpro/Flash/Share/chiploveFlashloader.swf?file=
- Của DeLight: https://i847.photobucket.com/albums/ab37/delight8x/plus2010/Aviraantivir_9117_Loader.swf?link=
Chèn đường dẫn của loader vào phía trước đường dẫn Player Flash.

3- Sau khi dùng flash tải thì những tính năng sau sẽ bị mất:
- Skin không hiện
- Hình không hiện
- PlayList không hiện và không chạy.
Tóm lại bạn chỉ có thể nhúng nhạc audio/video đơn. Đây lại là 1 nguyên nhân quan trọng khiến các blogger 360Plus hiếm khi dùng JWPlayer, bởi nếu chỉ làm được thế thì còn nhiều player đẹp hơn và cung cấp nhiều công dụng hơn.

4-Code mẫu để nhúng nhạc đơn và video đơn lên 360Plus:

Cách dùng: Ghi chồng đường dẫn audio/video lên chuỗi MP3MP4FLVURL trong code mẫu

Chúc bạn thành công

-CAROLINE JUDITH-

by carolinejudith Sun Oct 02, 2011 3:10 pm

Bài 7: Tạo player nhạc đơn với skin

Chúng ta hãy trở lại đồ thuật.
Ở vùng 1, bấm chọn "flvplayer with a single song" (dòng thứ 2, . Đồ thuật trông như sau:

I- Các tham biến mà bạn sẽ nhập là:

1- dòng source: http://img193.imageshack.us/img193/1797/onlymeplayer.swf
2- dòng link (bài En Ecoutant La Pluie - Sylvie Vartan):
http://www.fileden.com/files/2009/8/26/2555918/EnEcoutantLaPluie-SylvieVartan.mp3
3- - dòng skin: http://img30.imageshack.us/img30/7587/magma.swf
4- tùy ý thay đổi ở vùng colour
5- height="48" width="300"

II- Bấm nút "Update Preview & Code"
1- Copy code nhúng.
Code ấy như sau:

2- Paste code nhúng vào diễn đàn sẽ được kết quả:

Sau đây là bảng skin mà bạn có thể áp dụng cho mọi bài trong topic này:
-------------------------------------
http://img177.imageshack.us/img177/5...lifeseyret.swf
http://img30.imageshack.us/img30/5451/modieus.swf
http://img30.imageshack.us/img30/3033/kleur.swf
http://img30.imageshack.us/img30/1592/grungetape.swf
http://img30.imageshack.us/img30/7128/pearlized.swf
http://img30.imageshack.us/img30/7587/magma.swf
http://img30.imageshack.us/img30/9233/3dpixelstyle.swf
http://img30.imageshack.us/img30/2863/fashion.swf
http://img30.imageshack.us/img30/4578/schoon.swf
http://img30.imageshack.us/img30/5816/silverywhite.swf
http://img30.imageshack.us/img30/7650/atomicred.swf
http://img30.imageshack.us/img30/1310/snel.swf
http://img30.imageshack.us/img30/2844/metarby10.swf
http://img30.imageshack.us/img30/3598/bekle.swf
http://img30.imageshack.us/img30/3858/simple.swf
http://img30.imageshack.us/img30/899/comet.swf
http://img30.imageshack.us/img30/921/pixelize.swf
http://img30.imageshack.us/img30/6926/neon.swf
http://img30.imageshack.us/img30/8112/traganja.swf
http://img30.imageshack.us/img30/2198/playcasso.swf
http://img30.imageshack.us/img30/9945/festival.swf
http://img30.imageshack.us/img30/3951/bluemetal.swf
http://img30.imageshack.us/img30/4499/stylishslim.swf
http://img30.imageshack.us/img30/3372/dangdang.swf
http://img30.imageshack.us/img30/5677/nacht.swf
http://img30.imageshack.us/img30/9618/controlpanel.swf
http://img30.imageshack.us/img30/9489/stijl.swf
----------------------------------------
Chúc bạn thành công

-CAROLINE JUDITH-

by Sponsored content

Chế tạo player bằng đồ thuật online

Chế tạo player bằng đồ thuật online

Bài 2: Thay đổi Tham biến

Bài 3: Những tham số điều khiển

Bài 4: Nhận kết quả

Bài 5: Làm video List bằng JWPlayer

JWPLAYER - 360PLUS

Bài 7: Tạo player nhạc đơn với skin

Re: Chế tạo player bằng đồ thuật online