Về thẻ <video> trong HTML5
Thẻ <video> hỗ trợ các định dạng: mp4, ogg, WebM
Hãy bắt đầu với thứ tôi thích nhất
Video thay thế file gif
Ví dụ
- Autoplay: Play video ngay khi browser (trình duyệt) tải video. Vì dung lượng video nặng hơn image nên quá trình tải về có thể mất 1 khoảng thời gian. Lưu ý: thuộc tính này không hỗ trợ trên các devices mobile như iPhone, iPad.
- Preload: It intends to provide a hint to the browser about what the author thinks will lead to the best user experience.
- Loop: tự động play lại video.
- height, width: đặt chiều cao và ngang video theo pixels. Nếu không đặt thuộc tính này trang có thể nhấp nháy khi tải video.
- Controls: hiển thị thanh playback có các button play, pause, volume, etc.
<video src="/video.mp4" controls></video> - Muted: tắt âm thanh của video.
- Poster: Sử dụng ảnh làm bìa (cover) khi loading video hoặc cho đến khi nhấn play (nếu không Autoplay).
- src: It is used to specify the URL of the video file.
- <source>: cho phép bạn chỉ định các video thay thế mà trình duyệt hỗ trợ. Trình duyệt sẽ sử dụng định dạng được nhận dạng đầu tiên.
<video controls>
<source src="/video.webm" type="video/webm">
<source src="/video.ogg" type="video/ogg">
<source src="/video.mp4" type="video/mp4">
</video>- Đoạn text trong thẻ <video>Some text</video> sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ <video>.
- preload: xác định việc tập tin video có được tải cùng với lúc tải trang hay không.
Ví dụ sau:
<video src="/file.mp4" poster="/cover.jpg" playsinline="" autoplay="autoplay" muted="muted" loop="loop"
aria-hidden="true"></video>Video chạy nền chữ nằm bên trên
Hiệu ứng cực kỳ hấp dẫn nhưng cũng khá phức tạp, cần có sự kết hợp nhiều tag layout, nên sẽ tách ra 1 bài riêng ở link "Đặt chữ nằm trên Video"
Thêm phụ đề video
<video controls>
<source src="/video.webm" type="video/webm">
<source src="/video.ogg" type="video/ogg">
<source src="/video.mp4" type="video/mp4">
<track kind="subtitles" src="/english-subtitles.vtt" srclang="en" default />
<track kind="subtitles" src="/vietnamese-subtitles.vtt" srclang="vi" />
</video>Thiết lập hệ thống button play video
Cần phải kết hợp với js
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
<button onclick="Pauseplay()">Pause/Play</button>
<button onclick="Big()">Big</button>
<button onclick="Small()">Small</button>
<button onclick="Normal()">Normal</button>
<br>
<video id="myvideo" width="450">
<source src="/myvid.mp4" type="video/mp4">
<source src="/myvid.ogg" type="video/ogg">
</video>
</div>
<script>
var testvideo = document.getElementById("myvideo");
function Pauseplay() {
if(testvideo.paused) testvideo.play();
else testvideo.pause();
}
function Big() {
testvideo.width = 600;
}
function Small() {
testvideo.width = 300;
}
function Normal() {
testvideo.width = 450;
}
</script>
</body>
</html>Nguồn:
