Logo

HTML Audio & Video DOM: Thuộc Tính, Phương Thức & Sự Kiện

Kiến thức Frontend

HTML Audio & Video DOM: Thuộc Tính, Phương Thức & Sự Kiện

Tìm hiểu đầy đủ thuộc tính, phương thức và sự kiện của phần tử HTML Audio và Video để điều khiển và tương tác media bằng JavaScript.

1. Thuộc tính (Properties)

Các thuộc tính này cho phép bạn truy cập thông tin hoặc điều khiển trạng thái của phần tử media:

Thuộc tính Mô tả
audioTracks Trả về danh sách các track âm thanh trong phần tử <video>
autoplay Cho biết liệu video/audio có tự động phát hay không
buffered Trả về thời lượng phương tiện đã được tải (buffered)
controller Không còn được hỗ trợ
controls Hiển thị điều khiển phát media (play, pause, v.v.)
crossOrigin Xác định có sử dụng CORS khi tải media hay không
currentSrc URL của nguồn phương tiện hiện đang phát
currentTime Lấy hoặc thiết lập thời gian phát hiện tại (giây)
defaultMuted Cho biết phương tiện có tắt tiếng mặc định hay không
defaultPlaybackRate Tốc độ phát mặc định
duration Độ dài phương tiện (giây)
ended Xác định phương tiện đã phát xong hay chưa
error Thông tin lỗi nếu có khi tải hoặc phát media
loop Cho biết media có lặp lại hay không
mediaGroup Tên nhóm media mà phần tử thuộc về
muted Lấy hoặc thiết lập trạng thái tắt tiếng
networkState Trạng thái tải mạng của phương tiện
paused Kiểm tra xem media đang tạm dừng hay không
playbackRate Tốc độ phát hiện tại
played Phạm vi thời gian đã phát
preload Cách trình duyệt tải phương tiện trước khi phát
readyState Trạng thái sẵn sàng của phương tiện
seekable Phạm vi thời gian có thể tua
seeking Kiểm tra xem người dùng đang tua hay không
src Lấy hoặc thiết lập đường dẫn tới nguồn media
startDate Không còn được hỗ trợ
textTracks Danh sách các track văn bản (phụ đề, captions)
videoTracks Danh sách các track video
volume Âm lượng (0.0 đến 1.0)

2. Phương thức (Methods)

Các phương thức giúp bạn điều khiển và thao tác trực tiếp với media:

Phương thức Mô tả
addTextTrack() Thêm một track văn bản mới
canPlayType() Kiểm tra xem trình duyệt có thể phát kiểu phương tiện cụ thể
load() Tải lại phương tiện
play() Phát phương tiện
pause() Tạm dừng phương tiện

Ví dụ sử dụng:

const video = document.querySelector('video');

// Phát video
video.play();

// Tạm dừng video
video.pause();

// Thay đổi âm lượng
video.volume = 0.5;

// Tua đến giây thứ 30
video.currentTime = 30;

3. Sự kiện (Events)

Sự kiện cho phép bạn lắng nghe các thay đổi trạng thái media và thực hiện hành động tương ứng:

Sự kiện Mô tả
abort Trình duyệt ngừng tải media
canplay Đủ dữ liệu để bắt đầu phát
canplaythrough Có thể phát hết mà không dừng để tải thêm
durationchange Thời lượng media thay đổi
emptied Phương tiện được làm trống
ended Media phát xong
error Phát sinh lỗi khi tải hoặc phát media
loadeddata Dữ liệu ban đầu của media đã được tải
loadedmetadata Siêu dữ liệu (metadata) đã được tải
loadstart Bắt đầu tải media
pause Người dùng hoặc script tạm dừng phát
play Người dùng hoặc script bắt đầu phát
playing Phát bắt đầu sau khi bị dừng hoặc đệm
progress Trình duyệt đang tải dữ liệu
ratechange Tốc độ phát thay đổi
seeked Việc tua hoàn tất
seeking Đang tua đến vị trí mới
stalled Tải bị gián đoạn
suspend Tải bị tạm dừng
timeupdate Thời gian phát hiện tại thay đổi
volumechange Âm lượng hoặc trạng thái tắt tiếng thay đổi
waiting Dừng phát để đợi dữ liệu mới

Ví dụ sử dụng sự kiện:

const audio = document.querySelector('audio');

audio.addEventListener('ended', () => {
  console.log('Bài hát đã kết thúc.');
});

audio.addEventListener('timeupdate', () => {
  console.log(`Đang phát tại giây: ${audio.currentTime}`);
});

4. Tích hợp và nâng cao

Việc kết hợp các thuộc tính, phương thức và sự kiện mở ra nhiều khả năng nâng cao cho ứng dụng web:

  • Điều khiển đồng bộ nhiều media: Bạn có thể đồng bộ cùng lúc nhiều video hoặc audio bằng cách lắng nghe sự kiện timeupdate và điều chỉnh currentTime của từng phần tử media.

  • Tạo playlist thông minh: Dựa trên sự kiện ended, ứng dụng có thể tự động chuyển sang media tiếp theo trong danh sách, hỗ trợ shuffle hoặc lặp lại toàn bộ playlist.

  • Tương tác người dùng nâng cao: Kết hợp các sự kiện seeking, volumechange hoặc ratechange với các UI tùy chỉnh như slider, nút bấm hoặc gesture cho phép người dùng thao tác trực tiếp với media.

  • Quản lý phụ đề và track văn bản: Dựa trên textTracks và phương thức addTextTrack(), bạn có thể thêm phụ đề động, chú thích hoặc lời dẫn, đồng thời kiểm soát hiển thị theo ngôn ngữ hoặc thời điểm phát.

  • Kiểm soát chất lượng phát media: Sử dụng thuộc tính networkState, readyState và buffered để đánh giá tốc độ tải, hiển thị tiến trình buffer, hoặc tự động chuyển sang nguồn media chất lượng thấp khi mạng yếu.

  • Hiệu ứng thời gian thực: Kết hợp sự kiện timeupdate với canvas hoặc WebGL để tạo hiệu ứng đồng bộ theo video/audio, chẳng hạn hiển thị sóng âm, quang phổ, hoặc animation theo nhạc.

  • Phản hồi và cảnh báo lỗi: Sử dụng sự kiện error, stalled, waiting để hiển thị thông báo lỗi hoặc hướng dẫn người dùng khi gặp sự cố tải media.

  • Tích hợp đa phương tiện: Phần tử audio/video có thể kết hợp với các API khác như MediaRecorder, Web Audio API hoặc WebRTC để ghi âm, xử lý âm thanh, hoặc stream trực tiếp.

  • Tối ưu hóa trải nghiệm người dùng: Các thuộc tính như autoplay, loop, muted, kết hợp sự kiện playing và pause giúp bạn xây dựng trải nghiệm liền mạch, chẳng hạn tự động phát trailer, background music, hoặc video giới thiệu khi load trang.

5. Lời khuyên khi sử dụng DOM Media

  • Luôn kiểm tra khả năng trình duyệt hỗ trợ định dạng media với canPlayType().

  • Quản lý sự kiện tạm dừng, tua, và kết thúc để tránh trải nghiệm gián đoạn cho người dùng.

  • Tận dụng preload và buffered để tối ưu tốc độ load và giảm giật lag.

  • Khi thêm track văn bản, đảm bảo đồng bộ chính xác với thời gian phát để người dùng đọc phụ đề dễ dàng.

  • Kết hợp âm lượng (volume) và trạng thái tắt tiếng (muted) để hỗ trợ người dùng có nhu cầu truy cập đặc biệt.

  • Sử dụng các thuộc tính readyState và networkState để lập trình các hành vi dự phòng khi gặp vấn đề về kết nối mạng.

6. Ứng dụng thực tế

Các ứng dụng web hiện đại thường sử dụng DOM Audio/Video cho nhiều mục đích:

  • Player nhạc/Video trực tuyến: Spotify, YouTube, Vimeo đều dựa trên DOM API để đồng bộ UI với tiến trình phát.

  • Học trực tuyến: Các nền tảng như Coursera hay Khan Academy sử dụng phụ đề, chú thích, và playlist động để nâng cao trải nghiệm học tập.

  • Trình chiếu đa phương tiện: Các trang web marketing hoặc portfolio dùng video nền kết hợp canvas để tạo hiệu ứng tương tác.

  • Ứng dụng streaming trực tiếp: Kết hợp với WebRTC hoặc Web Audio API để phát trực tiếp, xử lý âm thanh thời gian thực.

  • Tương tác đa phương tiện: Web games hoặc trải nghiệm nghệ thuật sử dụng audio/video đồng bộ với animation, hiệu ứng ánh sáng, và phản hồi người dùng.

7. Tổng kết nâng cao

DOM Media là một công cụ mạnh mẽ và linh hoạt. Khi bạn nắm vững:

  • Thuộc tính: cho phép kiểm soát trạng thái và thông tin của media.

  • Phương thức: giúp thao tác trực tiếp, từ phát/tạm dừng đến tua và thêm track.

  • Sự kiện: cung cấp khả năng lắng nghe mọi thay đổi để phản hồi thời gian thực.

Tham khảo thêm:

Kết luận

HTML <audio> và <video> kết hợp với DOM API cung cấp công cụ mạnh mẽ để điều khiển, giám sát và tạo trải nghiệm media tương tác trên web. Nắm vững các thuộc tính, phương thức, và sự kiện sẽ giúp bạn xây dựng các ứng dụng web sinh động, từ player nhạc/video cơ bản đến các ứng dụng multimedia nâng cao.

#HTML

Phản hồi (0)
0