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 (Ảnh minh họa)
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:
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>:
Phần chữ giữa 2 thẻ <video> và </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.js và video-js.css
Bạn link 2 file này trong phần <head> của trang web:
1 2 | <link href="video-js.css" rel="stylesheet"> <script src="video.js"></script> |
Trong đó video.js và video-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:
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:
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,
Lục Đức Thành
Latest posts by Lục Đức Thành (see all)
- Cách hiển thị lượt truy cập ra ngoài front-end - 12/02/2023
- Sửa lỗi “không start được MySQL trong XAMPP” - 21/06/2020
- WordPress 5 có gì mới? - 23/12/2018
- Sublime Text 3 Portable Windows 64 bit - 11/12/2017
- Kỹ thuật nhúng font vào web và WordPress Theme - 12/11/2017
Mình muốn nhúng link youtube vào nhưng không được.
Bạn muốn nhúng Youtube và thay đổi giao diện bằng Video.JS hay chỉ muốn nhúng video Youtube vào web? Nếu muốn nhúng video Youtube vào web thì rất đơn giản nhé, bạn hãy xem bài viết này: Tổng hợp các cách chèn Video vào web http://mylop.edu.vn/tong-hop-cac-cach-chen-video-vao-trang-web/
Giáo viên cho mình hỏi mình muốn cài sub rồi vô đó thì thế nào ạ
Chào bạn Toàn, bạn có thể vào đây để xem cách chèn Sub nhé: http://docs.videojs.com/docs/guides/tracks.html
Giáo Viên Có Thể Cho Xem Cách Ghi mã Html Sao Cho Link Video.js hiện Đầy Đủ Ví Dụ
Html
……http://abc.zyz/Video.js……
Link File .mp4 …
Link file .ogg …
Html
dc k ạ
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.
Bạn thử làm theo link này nhé: https://github.com/videojs/videojs-youtube
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ồ
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
Ad ơi, ad có thể chỉ em cách bật 1 lúc 2 track không, cảm ơn ad nhiều.