EnglishHTML Video là một phần tử HTML cho phép bạn nhúng và phát video trực tiếp trên trang web mà không cần sử dụng các plugin bên ngoài như Flash. Thẻ <video> hỗ trợ nhiều định dạng video và cung cấp nhiều thuộc tính để điều chỉnh trình phát video, mang lại trải nghiệm người dùng tốt hơn.
Bài viết này là một phần của chuỗi học HTML trên "codetuthub.com", cùng với các bài học hữu ích khác như HTML Audio, HTML Media Attributes, và HTML Multimedia.
1. Giới thiệu về thẻ <video>
Thẻ <video> trong HTML5 được sử dụng để nhúng video vào trang web. Nó có thể chứa nhiều thẻ <source>, giúp đảm bảo video được phát trên nhiều trình duyệt khác nhau bằng cách cung cấp các định dạng khác nhau.
Cú pháp
<video controls>
<source src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" type="video/mp4">
<source src="https://codetuthub.com/example/file_OGG_1920_13_3mg.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ thẻ video.
</video>Trong ví dụ này:
- Thuộc tính
controlscho phép hiển thị các điều khiển phát video như nút phát/tạm dừng, âm lượng và thanh tiến trình. - Thẻ
<source>chỉ định tệp video và định dạng của nó.
2. Các thuộc tính cơ bản của thẻ <video>
2.1 controls
Thuộc tính controls cho phép hiển thị giao diện điều khiển video trên trình duyệt, cho phép người dùng phát, tạm dừng và điều chỉnh âm lượng.
<video src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" controls></video>Khi có controls, người dùng sẽ thấy thanh điều khiển của trình phát video.
2.2 autoplay
Thuộc tính autoplay giúp video tự động phát khi trang được tải. Tuy nhiên, nhiều trình duyệt hiện đại có thể không cho phép tự động phát âm thanh mà không có sự tương tác của người dùng.
<video src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" autoplay controls></video>2.3 loop
Thuộc tính loop giúp video phát lặp lại liên tục.
<video src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" loop controls></video>2.4 muted
muted giúp tắt tiếng video mặc định khi trang tải.
<video src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" muted controls></video>2.5 preload
Thuộc tính preload kiểm soát cách video được tải trước khi người dùng nhấn phát. Các giá trị của preload bao gồm:
- auto: Tải toàn bộ video khi trang được tải.
- metadata: Chỉ tải thông tin cơ bản như thời gian video.
- none: Không tải video trước.
<video src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" preload="auto" controls></video>3. Sử dụng nhiều định dạng video
HTML Video hỗ trợ nhiều định dạng video, nhưng không phải trình duyệt nào cũng hỗ trợ tất cả định dạng. Do đó, bạn nên cung cấp nhiều nguồn khác nhau để đảm bảo tính tương thích.
<video controls>
<source src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" type="video/mp4">
<source src="https://codetuthub.com/example/file_OGG_1920_13_3mg.ogg" type="video/ogg">
Trình duyệt của bạn không hỗ trợ video.
</video>Trong ví dụ này, nếu trình duyệt không hỗ trợ .mp4, nó sẽ chuyển sang .ogg để đảm bảo video vẫn được phát.
4. JavaScript với HTML Video
Bạn có thể điều khiển video bằng JavaScript để tùy chỉnh thêm các tính năng. Một số phương thức và thuộc tính phổ biến bao gồm:
- play(): Phát video.
- pause(): Tạm dừng video.
- currentTime: Đặt hoặc lấy thời gian hiện tại của video (tính bằng giây).
- volume: Đặt hoặc lấy âm lượng của video (giá trị từ 0 đến 1).
Ví dụ điều khiển video bằng JavaScript
<video id="myVideo" src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" controls></video>
<button onclick="playVideo()">Phát</button>
<button onclick="pauseVideo()">Tạm dừng</button>
<script>
var video = document.getElementById("myVideo");
function playVideo() {
video.play();
}
function pauseVideo() {
video.pause();
}
</script>Trong ví dụ này:
- Nút "Phát" sẽ gọi hàm
playVideo()để phát video. - Nút "Tạm dừng" sẽ gọi hàm
pauseVideo()để tạm dừng video.
5. Tạo trình phát video tùy chỉnh
Bạn có thể tạo trình phát video tùy chỉnh bằng cách kết hợp các thuộc tính của thẻ <video> và JavaScript.
Ví dụ trình phát video tùy chỉnh
<video id="customVideo" src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4"></video>
<button onclick="playVideo()">Phát</button>
<button onclick="pauseVideo()">Tạm dừng</button>
<input type="range" id="volumeSlider" min="0" max="1" step="0.1" onchange="setVolume(this.value)" />
<script>
var customVideo = document.getElementById("customVideo");
function playVideo() {
customVideo.play();
}
function pauseVideo() {
customVideo.pause();
}
function setVolume(volume) {
customVideo.volume = volume;
}
</script>Ở đây:
input type="range"là thanh trượt để điều chỉnh âm lượng. Khi người dùng thay đổi giá trị, hàmsetVolume()sẽ được gọi để thay đổi âm lượng của video.
6. Các thuộc tính nâng cao của HTML Video
HTML5 cung cấp thêm nhiều thuộc tính cho thẻ <video>, giúp bạn tùy chỉnh và điều khiển video một cách chi tiết hơn. Một số thuộc tính nâng cao bao gồm:
- playbackRate: Điều chỉnh tốc độ phát video.
- duration: Lấy độ dài của video (tính bằng giây).
- ended: Trả về
truenếu video đã phát hết.
Ví dụ sử dụng playbackRate
<video id="fastVideo" src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" controls></video>
<button onclick="setPlaybackRate(2)">Phát nhanh</button>
<script>
var fastVideo = document.getElementById("fastVideo");
function setPlaybackRate(rate) {
fastVideo.playbackRate = rate;
}
</script>Trong ví dụ này, khi nhấn nút "Phát nhanh", tốc độ phát video sẽ được tăng lên gấp đôi (playbackRate là 2).
7. Kết hợp HTML Video với các thẻ khác trên website
Bạn có thể kết hợp thẻ <video> với các thẻ HTML khác như <figure> và <figcaption> để tạo trình phát video kèm chú thích, tạo giao diện thân thiện và dễ hiểu hơn.
<figure>
<video src="https://codetuthub.com/example/file_MP4_1920_18MG.mp4" controls></video>
<figcaption>Video về "Hướng Dẫn Sử Dụng HTML Video"</figcaption>
</figure>8. Kết luận
HTML Video là một công cụ mạnh mẽ trong HTML5, giúp bạn dễ dàng thêm video vào trang web mà không cần đến các công cụ hỗ trợ bên ngoài. Bằng cách sử dụng thẻ <video> và các thuộc tính đi kèm, bạn có thể tùy chỉnh video cho phù hợp với nội dung của mình. Để học thêm về các phương tiện đa phương tiện trong HTML, hãy xem các bài học liên quan trên "codetuthub.com" như HTML Audio, HTML Media Attributes, và HTML Multimedia.
