Đa phương tiện: Video, Audio, Canvas và SVG

HTML hiện đại phát video, âm thanh và vẽ đồ họa mà không cần plugin. Bài này giới thiệu video, audio, track phụ đề, đồ họa vector SVG và vẽ bằng canvas.

35 phútCơ bản
Bạn sẽ học được
  • Phát video, audio với điều khiển
  • Thêm phụ đề bằng track
  • Vẽ hình bằng SVG
  • Vẽ bằng canvas và JavaScript
Thuật ngữ cần biết
Codec
Cách nén video/âm thanh: H.264, VP9, AV1, AAC, Opus.
SVG
Đồ họa vector viết bằng thẻ, phóng to không vỡ.
Canvas
Vùng vẽ điểm ảnh điều khiển bằng JavaScript.

Khái niệm và lý thuyết

<video> và <audio> có thể chứa nhiều <source> để trình duyệt chọn định dạng hỗ trợ. Định dạng an toàn nhất: video MP4 (H.264), âm thanh MP3. Video nặng nên đưa lên YouTube rồi nhúng (bài Iframe) để tiết kiệm băng thông máy chủ.

Video và audio

<video controls width="480" poster="/anh-bia.jpg" preload="metadata">
  <source src="/bai-giang.webm" type="video/webm">
  <source src="/bai-giang.mp4" type="video/mp4">
  <track src="/phu-de-vi.vtt" kind="subtitles" srclang="vi" label="Tiếng Việt" default>
  Trình duyệt không hỗ trợ video.
</video>

<audio controls>
  <source src="/bai-hat.mp3" type="audio/mpeg">
</audio>
Thuộc tínhTác dụng
controlsHiện nút phát, âm lượng
autoplay mutedTự phát (trình duyệt chỉ cho phép khi tắt tiếng)
loopLặp lại
posterẢnh bìa trước khi phát
preloadnone, metadata, auto

SVG

<svg width="220" height="100" viewBox="0 0 220 100">
  <rect x="5" y="5" width="90" height="90" rx="12" fill="#2e7d32"></rect>
  <circle cx="155" cy="50" r="40" fill="#ff9800" stroke="#e65100" stroke-width="4"></circle>
  <text x="50" y="57" fill="#fff" font-size="20" text-anchor="middle">SVG</text>
</svg>
Kết quả hiển thị
SVG

Canvas

<canvas id="ve" width="220" height="100" style="border: 1px solid #ccc;"></canvas>
<script>
  const ctx = document.getElementById("ve").getContext("2d");
  ctx.fillStyle = "#1976d2"; ctx.fillRect(10, 10, 80, 80);
  ctx.beginPath(); ctx.arc(160, 50, 35, 0, Math.PI * 2);
  ctx.fillStyle = "#e91e63"; ctx.fill();
</script>
Kết quả hiển thị

SVG phù hợp logo, biểu tượng, biểu đồ đơn giản; canvas phù hợp trò chơi, hiệu ứng, xử lý ảnh với nhiều điểm ảnh.

Mẹo hay

Tạo phụ đề .vtt bằng công cụ chuyển giọng nói thành chữ (ví dụ YouTube Studio), giúp người khiếm thính và người xem không bật loa.

Lưu ý

Tránh tự phát video có tiếng: gây khó chịu và bị trình duyệt chặn.

Thực hành
  1. Chèn một video MP4 có poster và controls.
  2. Vẽ lá cờ Việt Nam bằng SVG.
  3. Vẽ biểu đồ cột 3 giá trị bằng canvas.
Tóm tắt bài học
  • video/audio với source, controls, track.
  • MP4 và MP3 là định dạng an toàn.
  • SVG cho đồ họa vector; canvas vẽ bằng JavaScript.