Share Nhúng video vào website trong HTML5

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Video là nội dung có khả năng truyền đạt rất tốt với hình ảnh trực quan, sinh động, chính vì vậy mà có nhiều website sẽ sử dụng video làm một phần trong nội dung. Ở đây tôi không đề cập tới các thể loại website chuyên video như YouTube hay Vimeo... mà chỉ đề cập tới việc nhúng video vào các website nội dung thông thường một cách đơn giản và nhanh chóng. Các bạn có thể áp dụng hướng dẫn của bài viết này để nhúng video vào các thể loại website giới thiệu công ty, tin tức, bán hàng... để làm sinh động hơn cho website của mình.

Tôi sẽ hướng dẫn các bạn sử dụng các tính năng sẵn có của HTML5 để thực hiện việc nhúng một video vào website chứ không cần thiết phải sử dụng tới các trình player phức tạp. Bài hướng dẫn này phù hợp với các bạn mới làm quen với HTML, các bạn không chuyên muốn xây dựng website với các video nội dung, các bạn chỉ cần tham khảo bài viết của tôi là có thể làm được rồi.

Bây giờ, các bạn tham khảo ví dụ sau để biết cách nhúng một video vào website của các bạn:
HTML:
<video width="1280" height="720">
    <source type="video/mp4" src="path/to/video.mp4">
    <source type="video/ogg" src="path/to/video.ogg">
</video>
Với nội dung HTML như trên là các bạn đã nhúng thành công video vào website của mình. Với ví dụ trên, tôi quy định kích thước hiển thị của video và khai báo 2 định dạng video để video có thể hiển thị được trên nhiều trình duyệt khác nhau. Nguyên nhân của việc phải khai báo nhiều loại định dạng video là do các trình duyệt web khác nhau lại sử dụng các định dạng video khác nhau để hiển thị.

Trường hợp các bạn muốn hiển thị thanh công cụ để điều khiển việc dừng, tạm dừng, tới, lui... hoặc video tự động chạy khi website được tải xong thì các bạn có thể tham khảo 2 thuộc tính controls và autoplay ở ví dụ sau:
HTML:
<video width="1280" height="720" controls autoplay>
    <source type="video/mp4" src="path/to/video.mp4">
    <source type="video/ogg" src="path/to/video.ogg">
</video>
Trên đây chỉ là một ví dụ hướng dẫn đơn giản, các bạn có thể tìm hiểm thêm về HTML5 để nhúng video vào website tại địa chỉ https://www.w3schools.com/html/html5_video.asp.
 
Back
Top