Trong series này:

HTML Cấu trúc trang HTML Văn bản và định dạng Liên kết và điều hướng Hình ảnh và đa phương tiện Danh sách Bảng dữ liệu Form và input Phần tử Semantic HTML5 Audio, Video và Canvas Meta tags và phần head
Sửa trang này

Audio, Video và Canvas

Phần tử <video>

HTML5 hỗ trợ nhúng video trực tiếp mà không cần plugin:

<video src="video.mp4" controls width="640" poster="thumbnail.jpg"></video>
Thuộc tính Mô tả
controls Hiển thị thanh điều khiển (play, pause, volume…)
autoplay Tự động phát (cần thêm muted trên nhiều trình duyệt)
muted Tắt âm thanh mặc định
loop Lặp lại video khi kết thúc
poster Ảnh hiển thị trước khi video phát
preload auto / metadata / none — kiểm soát tải trước

Dùng <source> để hỗ trợ nhiều định dạng:

<video controls width="640">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <p>Trình duyệt của bạn không hỗ trợ thẻ video.</p>
</video>

Phần tử <audio>

Tương tự <video> nhưng chỉ phát âm thanh:

<audio controls>
  <source src="nhac.ogg" type="audio/ogg">
  <source src="nhac.mp3" type="audio/mpeg">
</audio>

Canvas — Vẽ bằng JavaScript

<canvas> tạo ra một vùng vẽ bitmap mà JavaScript có thể vẽ lên thông qua Canvas 2D API:

<canvas id="myCanvas" width="400" height="250"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// Vẽ hình chữ nhật
ctx.fillStyle = '#4472c4';
ctx.fillRect(50, 50, 200, 100);

Các phương thức vẽ chính:

Nhóm Phương thức
Hình chữ nhật fillRect, strokeRect, clearRect
Đường dẫn beginPath, moveTo, lineTo, arc, closePath
Tô / Viền fill(), stroke()
Văn bản fillText, strokeText, font
Ảnh drawImage

Ví dụ: Canvas vẽ hình cơ bản

    Kết quả 
    <canvas id="myCanvas" width="420" height="260"
  style="border:2px solid #ccc;display:block;margin:auto;background:#f0f8ff">
</canvas>
<p style="text-align:center;font-family:sans-serif;color:#555;margin-top:6px">
  Canvas 2D API — vẽ hình và văn bản
</p>

    const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Hình chữ nhật xanh
ctx.fillStyle = '#4472c4';
ctx.fillRect(30, 40, 160, 90);

// Hình tròn cam
ctx.fillStyle = '#ed7d31';
ctx.beginPath();
ctx.arc(300, 100, 70, 0, Math.PI * 2);
ctx.fill();

// Tam giác xanh lá
ctx.fillStyle = '#70ad47';
ctx.beginPath();
ctx.moveTo(60, 200);
ctx.lineTo(140, 110);
ctx.lineTo(220, 200);
ctx.closePath();
ctx.fill();

// Viền đường thẳng
ctx.strokeStyle = '#c00';
ctx.lineWidth = 2;
ctx.beginPath();
ctx.moveTo(260, 160);
ctx.lineTo(400, 240);
ctx.stroke();

// Văn bản
ctx.fillStyle = '#333';
ctx.font = 'bold 15px Arial';
ctx.fillText('HTML5 Canvas', 150, 245);

    Phần tử <iframe>

    <iframe> nhúng trang web hoặc nội dung ngoài vào trang hiện tại:

    <iframe src="https://example.com" width="600" height="400"
  title="Trang nhúng" loading="lazy"></iframe>

    Lưu ý: nhiều trang web chặn nhúng qua X-Frame-Options. Dùng <iframe> cho bản đồ Google Maps, video YouTube, widget, v.v.

    Ví dụ: Cấu trúc video với source

      Kết quả 
      <figure style="font-family:sans-serif;background:#f5f5f5;padding:1rem;border-radius:8px">
  <figcaption style="font-weight:bold;margin-bottom:0.5rem">
    Cấu trúc thẻ &lt;video&gt; với nhiều định dạng:
  </figcaption>
  <pre style="background:#1e1e1e;color:#d4d4d4;padding:1rem;border-radius:4px;overflow:auto;font-size:13px"><code>&lt;video controls width="640" poster="thumbnail.jpg"&gt;
  &lt;source src="video.webm" type="video/webm"&gt;
  &lt;source src="video.mp4"  type="video/mp4"&gt;
  &lt;p&gt;Trình duyệt không hỗ trợ HTML5 video.&lt;/p&gt;
&lt;/video&gt;</code></pre>
  <p style="color:#666;font-size:0.9rem;margin-top:0.5rem">
    Trình duyệt chọn định dạng đầu tiên nó hỗ trợ.
  </p>
</figure>

      Bình luận