Cách chèn trình xem phim vào trang web
Thật đơn giản để chèn một trình xem phim vào trang web. Cách chèn trình xem phim vào trang web Để chèn một trình xem phim vào trang web, ta sử dụng thẻ <video> và thẻ <source> theo cú pháp sau: <video controls> <source src="đường dẫn đến tập tin video" ...
Thật đơn giản để chèn một trình xem phim vào trang web.
Cách chèn trình xem phim vào trang web
Để chèn một trình xem phim vào trang web, ta sử dụng thẻ <video> và thẻ <source> theo cú pháp sau:
<video controls>
<source src="đường dẫn đến tập tin video" type="Media Type">
</video>Hiện nay, thẻ <video> chỉ hỗ trợ ba loại định dạng video là : MP4, WebM, Ogg
| Định dạng | Đuôi | Media Type |
|---|---|---|
| MP4 | .mp4 | video/mp4 |
| WebM | .webm | video/webm |
| Ogg | .ogg | video/ogg |
<video controls>
<source src="../public/home/file/bunny.mp4" type="video/mp4">
</video>
Để đề phòng trường hợp tập tin video không tồn tại, hoặc trình duyệt không hỗ trợ định dạng video của tập tin của bạn. Khi đó, ta có thể sử dụng nhiều thẻ <source> (nếu thẻ phía trên không hoạt động được thì sẽ đến phiên thẻ phía dưới)
<video controls>
<source src="../public/home/file/bunny.ogg" type="video/ogg">
<source src="../public/home/file/bunny.mp4" type="video/mp4">
</video>
 |
<video> là một thẻ trong phiên bản HTML5. Do đó, phía trên cùng của tập tin phải thêm thẻ <!DOCTYPE html> |
Thiết lập kích thước cho trình xem phim
Thuộc tính awidth dùng để thiết lập chiều rộng của trình xem phim.
Thuộc tính height dùng để thiết lập chiều cao của trình xem phim.
Giá trị của thuộc tính awidth và height có thể xác định theo đơn vị:
- px (Pixel)
- % (Phần trăm kích thước của phần tử chứa nó. Ví dụ: Phần tử chứa trình xem phim có chiều rộng 800px, ta thiết lập chiều rộng cho trình xem phim là 50% thì khi hiển thị ra màn hình, trình xem phim sẽ có chiều rộng là 400px)
<video awidth="400px" height="220px" controls>
<source src="../public/home/file/bunny.mp4" type="video/mp4">
</video>
Các thuộc tính của thẻ <video>
Thuộc tính dùng để cung cấp thêm thông tin, hành động cho trình xem phim (Ví dụ như: tự động phát video, phát lặp đi lặp lại, tắt tiếng,....).
| Thuộc tính | Ý nghĩa | Xem ví dụ |
|---|---|---|
| controls | Hiển thị trình điều khiển video | Xem ví dụ |
| autoplay | Tự động phát video khi trang web được load xong | Xem ví dụ |
| loop | Phát lặp đi lặp lại video mỗi khi nó phát hết | Xem ví dụ |
| muted | Tắt âm thanh của video | Xem ví dụ |
| poster | Dùng một tấm ảnh làm hình đại diện cho video trước khi nó được phát | Xem ví dụ |
