HTML5 06 – Cách chèn trình xem phim vào trang web trong HTML5

0
270

Video là một cách tuyệt vời để nói chuyện với khán giả và truyền đạt thông tin một cách thú vị. Thêm video vào một trang web không dễ dàng như tải nó lên YouTube. Thật tuyệt vời nếu mẫu trang web hoặc CMS cho phép thực hiện điều đó một cách hoàn hảo, nếu không, bạn sẽ phải dành hàng giờ để khiến các video hoạt động. Để tránh trường hợp này xảy ra, bài viết này sẽ hướng dẫn các bạn cách nhúng video vào website với thẻ <video> trong HTML5.

Nhúng video là gì?

Nhúng video là cách bạn đưa một video vào code trong website. Có nghĩa là trình phát video được tích hợp trong trang web.

Nhúng video không giới hạn trong việc tải lên một video đơn giản đến một số máy chủ, đó là một quá trình phức tạp hơn rất nhiều. Bạn sẽ cần một video ở định dạng được chỉ định và một trình phát web để chạy nó.

Định dạng video nhúng

Video thường có nhiều định dạng mà các bạn cũng khá quen thuộc như: AVI, MP4, MKV, WMV, TOD, TS, …

MP4 (H.264, AAC) dường như là định dạng phổ biến nhất cho video phát trực tiếp trên Internet. Nó không liên quan đến bất kỳ phần mềm trung gian (middleware) cụ thể nào và có thể được xem trực tiếp ở hầu hết các trình duyệt trên máy tính để bàn và di động.

Tiêu chuẩn nhúng video vào website

Trong HTML4, chỉ có một tiêu chuẩn web được biết đến và nó không cho phép nhúng video trực tiếp vào các trang web. Các thẻ <iframe> hoặc <object> với tham chiếu đến một số phần mềm middleware (như Flash Player hoặc RealPlayer) mới làm được.

Nhưng với phiên bản HTML5, nó cho phép nhúng video vào website mà không cần bất kỳ phần mềm trung gian nào, chỉ qua thẻ <video>. Tất cả những gì bạn cần là một tệp video ở định dạng yêu cầu và một code trình phát web đơn giản như sau:

Một lợi thế của HTML5 là nó hỗ trợ đa nền, video HTML5 có thể chạy tốt trên PC, điện thoại thông minh và máy tính bảng.

Kết luận

Như vậy là trong bài này, tôi đã hướng dẫn các bạn xong cách thức chèn 1 trình xem phim, xem video vào trong website rồi. Rất hữu ích phải không nào. Hẹn gặp lại các bạn trong các bài tiếp theo.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây