HTML cơ bản – Bài 13: Audio, video, phụ đề và nội dung nhúng
Bạn sẽ biết khi nào dùng audio, video hoặc iframe, cách cung cấp điều khiển và nội dung thay thế, cùng những giới hạn cần hiểu trước khi nhúng tài nguyên từ website khác.
Lộ trình này học qua website “Góc học web”: trang chủ, trang bài viết và trang liên hệ. Mỗi bài giải quyết một việc cụ thể. Các bài về từng thẻ là tài liệu tra cứu, không phải danh sách bắt buộc học thuộc.
Mục lục
Chọn phương tiện theo nhu cầu người đọc
Một hướng dẫn có thể cần video thao tác, audio phát âm hoặc một sơ đồ tĩnh. Không nên thêm video chỉ vì muốn trang trông hiện đại. Người đọc có thể không bật được âm thanh, mạng chậm hoặc cần tìm nhanh một thông tin trong văn bản.
Nội dung chữ tóm tắt và bản chép giúp tiếp cận kiến thức mà không phụ thuộc vào việc phát media. Chỉ sử dụng tệp có quyền phân phối; nhúng một URL tìm thấy trên mạng không tự tạo ra quyền sử dụng nội dung đó.
Video và audio với điều khiển sẵn có
controls yêu cầu trình duyệt hiển thị điều khiển phát. source mô tả tài nguyên và loại nội dung để trình duyệt lựa chọn khi phù hợp. preload=”metadata” là gợi ý tải thông tin, không phải bảo đảm trình duyệt luôn chỉ tải đúng một lượng cố định.
Không đặt autoplay làm mặc định cho bài học: trình duyệt có thể chặn, đồng thời âm thanh hoặc chuyển động ngoài ý muốn có thể gây khó sử dụng. Hành vi còn phụ thuộc thiết bị, trạng thái muted và chính sách trình duyệt.
Caption và bản chép không hoàn toàn giống nhau
track có thể cung cấp captions theo thời gian qua tệp WebVTT. Captions cho nội dung âm thanh nên diễn đạt cả lời nói và âm thanh quan trọng, không chỉ dịch phụ đề. Transcript là bản văn có thể đọc riêng, không nhất thiết bám từng mốc phát.
WEBVTT
00:00.000 --> 00:03.000
Chào mừng bạn đến với Góc học web.Bộ ví dụ có tệp phụ đề mẫu nhưng không kèm video MP4 hoặc audio có bản quyền. Mã video trong bài là mẫu cấu trúc; muốn phát được, bạn cần cung cấp tệp media phù hợp và kiểm tra phụ đề với nội dung thật. Không được coi phần điều khiển trống là bằng chứng video đã hoạt động.
Iframe là một tài liệu bên trong tài liệu
iframe nhúng một trang khác, không phải nhập các phần tử của trang đó trực tiếp vào DOM của trang cha. Đặt title mô tả rõ mục đích khung. Kích thước nên phù hợp vùng hiển thị; cho phép cuộn khi nội dung cần, đừng giấu mọi phần vượt ra ngoài.
Website bên kia có thể chặn việc được nhúng bằng chính sách của nó. Mở được URL ở tab riêng không có nghĩa iframe chắc chắn hiển thị được. Cũng không nên yêu cầu người học tắt bảo vệ của trình duyệt để vượt qua chính sách nhúng.
Quyền của nội dung nhúng
sandbox giới hạn khả năng của iframe; chỉ thêm quyền thực sự cần theo nội dung và rủi ro của trang. allow điều khiển một số khả năng khác theo Permissions Policy. Không sao chép một danh sách quyền rộng để làm cho mọi thứ “chạy được”.
Ví dụ xem trước của bài dùng một tài liệu nhúng tĩnh do giáo trình cung cấp. Nó không tải video từ dịch vụ bên ngoài và không xin quyền camera, micro hay vị trí. Đây là cách học ngữ nghĩa của khung trước khi tích hợp một dịch vụ thật.
Ví dụ để tự chạy
Tạo một tệp HTML để thử đoạn mã sau. Nếu đây là đoạn trích trong body, hãy đặt nó vào bộ khung tài liệu đã học ở bài 3. Bộ mã tải về có sẵn ví dụ đầy đủ của bài này.
<video controls width="640" preload="metadata" poster="images/goc-hoc-web.png">
<source src="media/gioi-thieu.mp4" type="video/mp4">
<track kind="captions" src="media/phu-de-vi.vtt" srclang="vi" label="Tiếng Việt" default>
Trình duyệt không hỗ trợ video. Hãy đọc bản nội dung văn bản.
</video>
<p><a href="ban-chep.html">Đọc bản chép nội dung</a></p>
<iframe src="nhung.html" title="Khung minh họa nội dung nhúng" width="640" height="180" loading="lazy" sandbox></iframe>Kết quả hiển thị
Khung xem trước hiển thị một tài liệu HTML tĩnh nằm trong iframe. Đoạn mã video là ví dụ cấu trúc, cần tự cung cấp tệp MP4 hợp lệ trước khi thử phát.
Mở ví dụ bài 13 trong tab riêng · Tải bộ ví dụ 16 bài và website hoàn chỉnh
Lỗi thường gặp và cách sửa
- Đặt title=”iframe”: dùng nhãn mô tả khung thực sự chứa gì.
- Nghĩ controls là video đã tải thành công: kiểm tra tệp và khả năng phát.
- Chép URL trang xem video vào source: source cần địa chỉ media phù hợp, không phải mọi trang HTML.
Tự kiểm tra
- Phân biệt trang chép nội dung và tệp WebVTT.
- Giải thích vì sao một website mở được ở tab riêng vẫn có thể bị chặn trong iframe.
Tra cứu khi cần
Bài viết liên quan:
Dịch vụ thiết kế Wesbite
