Cách áp trình Video Player vào CodeIgniter project

Như các bạn đã biết việc áp trình Video Player là rất cần thiết đối với những trang liên quan về quảng cáo sản phẩm, trang chia sẻ phim hoặc trang ca nhạc. Trong bài lần này chúng ta sẽ tìm hiểu cách áp một chương trình Video Player thông dụng vào CodeIgniter project.

Các công cụ cần thiết.

Chúng ta sẽ sử dụng bộ JWPlayer để tích hợp cho website của mình.

1. Tải bộ JWPlayer.

Trước tiên các bạn hãy tải bộ JWPlayer mới nhất về theo đường dẫn ở trên. Tiếp sau đó các bạn giải nén file download ra và chép bộ JWPlayer này vào thư mục public của hệ thống.

Cách áp trình Video Player vào CodeIgniter project

2. Thiết lập cấu hình.

Trong file template của mình, chúng ta cần gọi đến bộ thư viện jquery lên đầu tiên. Do jwplayer có sử dụng mã javascript liên quan.

<script type="text/javascript" src="<?php echo base_url();?>public/slider/scripts/jquery-1.4.3.min.js"></script>

Sau đó chúng ta chỉ đơn giản là nhúng bộ JWPlayer này vào bằng đoạn mã sau.

<embed
type="application/x-shockwave-flash" 
id='MediaPlayer'
name='MediaPlayer'
quality="high" 
src='<?php echo base_url();?>public/jwplayer/player.swf'
width='320'
height='240'
allowscriptaccess='always'
allowfullscreen='true'
flashvars='file=<?php echo $sz_VideoUrl;?>'
/> 

Trong đó có các tham số quan trọng như sau:

  • type : chỉ ra loại trình flash được dùng.
  • id : Id của thành phần html ta tạo ra, ở đây là thẻ <embed />
  • name : Tên của thành phần html được tạo ra
  • src : đường dẫn tới bộ jwplayer
  • file : đường dẫn tới file video cần trình chiếu.

Cách áp trình Video Player vào CodeIgniter project

Sau khi chèn đoạn mã trên vào chương trình thì coi như chúng ta đã áp trình Video Player thành công. Tiếp theo chúng ta tiến hành chạy thử chương trình trên trình duyệt. Và kết quả sẽ như hình bên dưới.

Cách áp trình Video Player vào CodeIgniter project

File bên dưới là toàn bộ module video, và bộ JWPlayer. Các bạn hãy tải về và thực hành theo hướng dẫn trong bài. cach-ap-chuong-trinh-video-player-vao-codeigniter-project.zip

Chúc các bạn thành công :)

Tags: