Hướng dẫn chèn HTML5 Video vào trang web bằng Video.JS

HTML5 Video giúp bạn chèn video vào trang web một cách khá dễ dàng và tiện lợi. Điểm đặc biệt hay của kỹ thuật này là Video có thể xem được trên tất cả các trình duyệt hiện đại, trên tất cả các nền tảng từ PC, Laptop cho tới Tablet, Mobile…, không phân biệt HĐH Windows, Mac, Adroid hay iOS… Điểm hay nữa của HTML5 Video đó là ta không cần phải cài thêm các plug-in lên các trình duyệt. Quá tuyệt phải không nào?

Và, hôm nay MyLớp.edu.vn sẽ hướng dẫn bạn tìm hiểu cách chèn HTML5 Video vào các trang web cũng như sử dụng thư viện mã nguồn mở Video.JS để tạo ra một Video Player đẹp đẽ, chuyên nghiệp hơn.

Hướng dẫn chèn HTML5 Video vào trang web bằng Video.JS

Hướng dẫn chèn HTML5 Video vào trang web bằng Video.JS

Hướng dẫn chèn HTML5 Video vào trang web bằng Video.JS (Ảnh minh họa)

View Demo   Download Files

1. Kỹ thuật cơ bản

Để chèn Video vào trang web, đơn giản bạn chỉ cần chèn vào đoạn code như sau:

HTML Code:
1
2
3
4
5
<video width="320" height="240" controls autoplay>
	<source src="movie.mp4" type="video/mp4">
	<source src="movie.ogg" type="video/ogg">
	Your browser does not support the video tag.
</video>

Một số thuộc tính của thẻ <video>:

width, height: Kích thước bề rộng, chiều cao của Video

controls: Bật / tắt phần điều khiển Video

autoplay: Bật / tắt chế độ Autoplay

src: Đường dẫn đến file video. Để tương thích với tất cả các trình duyệt, bạn cần nhiều loại file video khác nhau, như .mp4, .ogg.webm. Tương ứng với mỗi loại file là một type khác nhau. Chi tiết bạn có thể xem thêm tại W3Schools

Phần chữ giữa 2 thẻ <video></video> chỉ hiển thị trong trường hợp các trình duyệt không hỗ trợ phần tử <video>.

Nói chung cũng khá đơn giản, và đây là một ví dụ:

2. Sử dụng Video.JS để làm đẹp Player

Như đã nói trong phần trên, Video.JS sẽ giúp bạn tạo ra các HTML5 Video Player đẹp đẽ và chuyên nghiệp hơn.

Nếu bạn biết JavaScript và CSS, bạn có thể tự lập trình để được một Video Player theo ý mình. Tuy nhiên không phải ai cũng làm được việc này, và để cho câu chuyện đơn giản, các bạn nên dùng các Video Player đã lập trình sẵn. Video.JS là một sự lựa chọn trong số khá nhiều các Video Player khác vì tính đơn giản, dễ sử dụng, người thiết kế và lập trình có thể tùy biến thêm. Phần tùy biến nâng cao các bạn tự tìm hiểu trên trang chủ của Video.JS, MyLớp.edu.vn sẽ đề cập đến vấn đề này trong một bài viết khác.

Để sử dụng Video.JS, trên trang chủ VideoJS.com, các bạn download gói mã nguồn về. Trong gói mã nguồn này, có 2 file quan trọng nhất để bạn sử dụng, đó là video.jsvideo-js.css

Bạn link 2 file này trong phần <head> của trang web:

HTML Code:
1
2
<link href="video-js.css" rel="stylesheet">
<script src="video.js"></script>

Trong đó video.jsvideo-js.css là đường dẫn tới các file JavaScript và CSS của thư viện Video.JS, lưu ý các bạn phải cấu hình cho chính xác đường dẫn, nếu không nó sẽ không hoạt động được.

Hoặc bạn có thể sử dụng luôn CND Version mà khỏi cần tải thư viện Video.JS về máy:

HTML Code:
1
2
<link href="http://vjs.zencdn.net/4.11/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.11/video.js"></script>

Tiếp theo, bạn chèn đoạn code sau tại vị trí muốn hiển thị Video trên trang web:

HTML Code:
1
2
3
4
5
<video id="MY_VIDEO_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264" poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
	<source src="MY_VIDEO.mp4" type='video/mp4'>
	<source src="MY_VIDEO.webm" type='video/webm'>
	<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

Các bạn sửa lại các thông số về kích thước, đường dẫn đến file video cũng như đường dẫn đến file poster, còn mọi thứ khác nên để yên. Poster là một file ảnh hiển thị lúc video chưa được bật.

Nếu các bạn cấu hình đúng, kết quả sẽ giống như ví dụ này:

Hãy click lên nút Play để xem thử. Đẹp hơn hẳn Video Player mặc định đúng không nào?

Kết luận

Như vậy, bạn đã biết cách chèn HTML5 video vào trang web cũng như sử dụng Video.JS để video của bạn nhìn đẹp và chuyên nghiệp hơn. Bài hướng dẫn của MyLớp.edu.vn đến đây là kết thúc, hẹn các bạn ở bài viết nâng cao về Video.JS. Chúc các bạn làm thực hành thành công!

Một số từ khóa để tìm kiếm trên Google:

– video.js
– Video Player
– HTML5 Video Player, HTML5 Video
– Chèn HTML5 Video vào trang web

Cheers,

AZDigi - Hosting WordPress tốt nhất!
The following two tabs change content below.
Tôi là kỹ sư Cơ khí, kỹ sư CNTT trường ĐH Bách Khoa Hà Nội. Tôi hoạt động trong lĩnh vực CNTT, bao gồm Software Development, Web Design, Web Development, Interactive Multimedia and Mobile App, Mobile Game Development. Tôi rất yêu công nghệ và tôi lập ra trang web này để chia sẻ kiến thức về công nghệ với mọi người.

Bình luận

9 thoughts on “Hướng dẫn chèn HTML5 Video vào trang web bằng Video.JS

  1. Bây giờ mình muốn nhúng video youtube vào videojs được k ạ và nếu có cho mình hướng dẫn luôn.

  2. ad có thể chỉ em chi tiết về cách dùng code này được k ạ ???cho em cái facebook để em hỏi với….hơi mơ hồ

  3. Chào bạn, mình đã chèn video mp4 nhưng tại sao chỉ xem được trên cốc cốc còn các trình duyệt khác thì bị lỗi

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

*
*
Website