Hướng Dẫn Tải Phim Và Chèn JWPlayer Vào Web Dễ Nhất
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 Để tải tôi hướng dẫn bạn theo Video như sau: Bạn muốn được hướng dẫn chi tiết hoặc download phần mềmliên hệ email: [email protected] 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... Bạn có thể download JW Player bản mới nhất version 4.5 ở đây: http://www.longtailvideo.com/players/jw-flv-player Trước khi download, bạn nhớ tháo 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 trên mạng, trong khuôn khổ bài viết này tớ không đề cập. 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: http://player.longtailvideo.com/player.swf 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í
) 1. Code tổng quát: Code tổng quát để chèn JW Player vào blog dạng sau: 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: 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: a. File properties: các biến khai báo file nhạc hay video bạn cần nhúng vào blog b. Layout: các biến khai báo giao diện cho JW Player c. Behaviour: các biến quy định cách thức chơi nhạc hay video. Ở đây tớ 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 & thì mới dùng được. Còn ở Yahoo Plus thì nó sẽ tự động chuyển & thành & cho bạn. a. File properties: * file: khao báo đường dẫn file music hay video ví dụ: file=http://hpbox.425mb.com/media/music/Bai_Khong_Ten_so_4.mp3 * image: khai báo file ảnh bạn muốn hiển thị trên màn hình JW Player. ví dụ: image=http://img18.imageshack.us/img18/9954/kittycm.jpg 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: 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 Stijl: http://www.longtailvideo.com/files/skins/stijl.swf Comet: http://www.longtailvideo.com/files/skins/comet.swf Playcasso: http://www.longtailvideo.com/files/skins/playcasso.swf ví dụ: skin=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 ví dụ: http://img27.imageshack.us/img27/3257/logohz.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 * 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=fffffff&frontcolor=000000&lightcolor=66cc00 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) Bạn có thể tham khảo mã màu ở ngay trong blogspot (phần Settings \ Fonts & Color) hoặc vào trang sau để lấy mã màu: http://www.colorpicker.com/ * 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. 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:
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
). Tớ sẽ bôi đậm & để bạn dễ phân biệt giữa các biến với nhau. a. Chèn nhạc: b. Chèn video: 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ỡ WxH=400x300, 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:
- 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 đủ. 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% 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: 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:
true http://www.longtailvideo.com/files/skins/snel.swf http://img27.imageshack.us/img27/3257/logohz.png #ffffff #000000 #66cc00 #000000 bottom 0 play 1 0 list 1 90Nế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
allowfullscreen="true">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:
Tên bài hát Miêu tả link bài nhạc hay videoPhần để hỗ trợ hiển thị tiếng Việt Mỗi file khai báo sẽ nằm trong cặp thẻ 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ẻlink ảnh minh họa sẽ hiển thị trên màn hình JW Player link bạn muốn chỉ dẫn cho bài Bài Không Tên Số 4 (Vũ Thành An) Ghita solo: Đỗ Minh Thông http://hpbox.425mb.com/media/music/Bai_Khong_Ten_so_4.mp3
http://img37.imageshack.us/img37/7007/kittyz.jpg http://huypham.tk/
allowfullscreen="true">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ạ:
public class Logo extends MovieClip { /** Configuration defaults **/ protected var defaults:Object = { prefix: "http://l.longtailvideo.com/", file: "logo.png", link: "http://www.longtailvideo.com/players/jw-flv-player/", margin: 8, out: 0.5, over: 1, timeout: 3, hide: "true", position: "bottom-left" }Đây là đoạn code dành cho logo của JW Player v.5. Bạn để ý 2 dòng code tớ bôi màu đỏ đó chính là đoạn code hiển thị cái logo ngứa mắt
public class Logo extends MovieClip { /** Configuration defaults **/ protected var defaults:Object = { prefix: "http://l.longtailvideo.com/", file: "", link: "", margin: 8, out: 0.5, over: 1, timeout: 3, hide: "true", position: "bottom-left" }Save file logo.as rồi sau đó bạn biên dịch thành file SWF là xong. Bạn nhớ làm đúng, đừng có thay đổi gì khác nếu không sẽ báo lỗi trong quá trình biên dịch đó.
Topics: Công nghệ mới Học từ Youtobe
About Học viện đào tạo trực tuyến
Xinh chào bạn. Tôi là Đinh Anh Tuấn - Thạc sĩ CNTT. Email: [email protected] . - Nhận đào tạo trực tuyến lập trình dành cho nhà quản lý, kế toán bằng Foxpro, Access 2010, Excel, Macro Excel, Macro Word, chứng chỉ MOS cao cấp, IC3, tiếng anh, phần mềm, phần cứng . - Nhận thiết kế phần mềm quản lý, Web, Web ứng dụng, quản lý, bán hàng,... Nhận Thiết kế bài giảng điện tử, số hóa tài liệu... HỌC VIỆN ĐÀO TẠO TRỰC TUYẾN:TẬN TÂM-CHẤT LƯỢNG. «Next
Bài đăng Mới hơn
»Previous
Bài đăng Cũ hơn
Bài đăng Mới hơn Bài đăng Cũ hơn Trang chủBài đăng nổi bật
Khóa Đào Tạo Hacker Mũ Trắng
Nhấn vào đây để bắt đầu khóa học Giúp học viên tìm hiểu cơ bản bản chuyên sâu kỹ năng hack website, sever, email, sms, facebook... Khóa...
Tuyển tập hay nhất
Khóa học trực tuyến
Truy cập nhiều nhất
-
Hướng dẫn về ASP.NET MVC và Action Result Nếu bạn đã từng làm việc trong một dự án ASP.NET MVC thì chắc chẳng còn xa lạ gì với khái niệm Action result mà ASP.NET MVC đã và đang cung... -
Hướng dẫn sử dụng phần mềm Anki - Học tiếng anh hiệu quả nhất Anki là một phần mềm được thiết kế để giúp bạn ghi nhớ các sự kiện, từ ngữ (chẳng hạn như từ ngữ trong một ngôn ngữ nước ngoài) một cách ... -
Cách dùng Termux để cài phần mềm Hack trên điện thoại Android Mục lục bài viết Termux là gì? Cách cài đặt Có thể dùng Termux để Hack không? Cách cài đặt các công cụ hack trên Termux Cài NMAP – Công cụ ...
-
Apple tung video quảng cáo độ bền và camera của iPhone 11 Pro Apple vừa tung hai đoạn video ngắn để quảng cáo cho độ bền và 3 camera trên iPhone 11 Pro . Bạn sẽ thấy là iPhone 11 Pro bị ném nh...
-
Phần mềm Bizagi Thiết kế, quản lý dữ liệu dự án cho doanh nghiệp Bizagi Modeler được thiết kế để diễn đạt hệ thống ký hiệu mô hình hóa tiến trình nghiệp vụ BPMN theo cấu trúc dự án, tiến tới mục tiêu tăng ... -
Giới thiệu cơ sở dữ liệu AdventureWorks Trước đây, khi nói tới cơ sở dữ liệu ví dụ của Microsoft chúng ta sẽ nghĩ ngay tới CSDL Northwind , tuy nhiên từ khi giới thiệu SQL Server... -
Những thói quen xấu đang "giết chết" chiếc laptop của bạn Laptop ngày càng khẳng định được vị thế quan trọng trong cuộc sống của con người hiện đại, song, ít ai biết được rằng, nh... -
108 câu hỏi trắc nghiệm và đáp án môn Quản Trị Mạng Câu hỏi và đáp án Câu 1. Địa chỉ IP có độ dài bao nhiêu bit và được phân thành bao nhiêu lớp? a. 32 bit, 4 lớp (A, B,C,D) ... -
Bí kíp giúp ‘Bố già’ Tokuda giữ được sự sung mãn, đóng 400 phim JAV suốt 20 năm dù đã gần 90 tuổi Diễn viên JAV Shigeo Tokuda cho rằng tuổi tác không hoàn toàn là vấn đề, xứng đáng danh hiệu "Made in Japan- gần 90 năm vẫn chạy tốt...
-
Tìm kiếm file trên Window theo nhiều điều kiện hoặc danh sách Bạn đã bao giờ phải tìm danh sách các file khi biết tên file của các nó; nếu bạn cần xử lý tình huống như vậy hãy sử dụng công cụ SearchMyF...
Tin công nghệ
Download
Danh mục bài viết
- 3ds Max
- access
- Adobe Illustrator
- AI
- android
- Articulate Storyline
- autoit
- Bài thuốc
- Cây xanh
- Cây xanh trong nhà
- CI Framework
- Clip ca nhạc
- Công nghệ Mobile
- Công nghệ mới
- Công nghệ số
- css
- DotnetNuke
- Download
- Đào tạo CorelDraw chuyên nghiệp
- Đào tạo photoshop chuyên nghiệp
- Định hướng lập trình
- Đọc sách
- excel
- Foxpro
- Giải pháp excel chuyên nghiệp
- Giải trí
- Giáo dục
- Giới thiệu Phần mềm
- Google Apps Script
- Google Docs
- Google drive
- Google Sheets
- Google Slide
- HAcker
- Hàng khuyến mại
- hay
- Hệ thống Elearning Moodle
- Học tiếng anh
- Học từ Youtobe
- html
- Hướng dẫn xây dựng và quản lý JOOMLA
- Imacro
- ios apple
- Iphone
- Khoa học dữ liệu
- Khóa học hay
- Khóa học trực tuyến
- Kiểm thử phần mềm
- Kiến thức cơ bản
- Kiến thức cuộc sống
- Kinh doanh
- Kỹ năng
- lập trình
- Lập trình .NET
- Lập trình AngularJS
- Lập trình assembly
- Lập trình di động
- Lập trình Java
- Lập trình Javascript
- Lập trình Nodejs
- Lập trình PHP
- Machine Learning
- Microsoft Teams
- MP3
- Nấu ăn
- Nét xinh
- Ôn luyện thi chứng chỉ MOS
- phần cứng
- Phần mềm cho Bé và Cha mẹ
- PHP tool
- powerpoint
- Python
- Quản trị cơ sở dữ liệu SQL
- Quản trị dự án-công việc hiệu quả
- Quản Trị Mạng
- Sách nói
- Sách nổi tiếng - Best Seller
- Sáng tạo
- SEO-Tối ưu công cụ tìm kiếm
- skype
- SPSS
- Suy ngẫm hay
- Sức khỏe
- Symfony Framework
- tết
- Thiết kế đồ họa
- Tin hay
- Tin học Văn phòng
- Toeic 500-700
- Tranh treo
- Unity 3D
- vba
- visio
- web
- word
- wordpress
- Xây dựng bài giảng điện tử
- zalo
Nhóm Zalo CÔNG NGHỆ
Hiện nay có rất nhiều công việc mà bất cứ ai cũng có thể làm tốt khi không yêu cầu quá nhiều kiến thức chuyên môn, như: Bán hàng chẳng hạn. Ngồi một chỗ, với điện thoại và laptop là bạn có thể bán hàng 63 tỉnh thành, thậm chí toàn thế giới. Còn nếu bạn chưa biết bán hàng sao cho hiệu quả thì vào nhóm: HỌC VIỆN ĐÀO TẠO TRỰC TUYẾN. Bảo hiểm nhân thọ - bảo vệ người trụ cột
HỌC VIỆN ĐÀO TẠO TRỰC TUYẾN-TẬN TÂM-CHẤT LƯỢNG © 2014. All Rights Reserved. Designed by [email protected] Tel: 098 909 5293
Pages
Từ khóa » Cài đặt Jwplayer
-
Cách Tải Xuống Video Từ JW Player
-
Cách Tải Xuống Video Trình Phát JW (Chrome Và Firefox)
-
4 Cách Bạn Có Thể Tải Xuống Video Trình Phát JW Mà Không Phải Trả Tiền
-
Cài đặt Jw Player - Onfire
-
Miễn Phí Tải Về Jwplayer Cho Windows
-
Miễn Phí Tải Về JW Player Cho Web
-
Làm Thế Nào để Tải Xuống Video Từ JW Player? - GeekCarrot
-
JW Player AD Cho Máy Tính PC Windows - AppChoPC
-
Các Bước đơn Giản để Tải Video Từ JW Player
-
Jw Player Là Gì - Hướng Dẫn Sử Dụng Jwplayer Và Videojs Để ...
-
Cài đặt JWplayer Cho Wordpress Làm Site Film Self-hosted
-
Cách Tải Xuống Video Trình Phát JW (3 Phương Pháp) - VI Atsit
-
Jwplayer Là Gì
-
Hướng Dẫn Tạo Nút Download (Button Download) Cho JW Player