Bài 12. Đưa âm thanh, phim và khung nội tuyến lên trang web
Một trang web chỉ có chữ thì vẫn còn im lặng. Bài học này chỉ cách cho trang cất tiếng và chuyển động bằng hai thẻ <audio>, <video>, rồi mở thêm một khung nội tuyến <iframe> để đặt nguyên một trang web khác - bản đồ, biểu mẫu, video trực tuyến - vào ngay giữa trang của mình.
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F4. Thêm dữ liệu đa phương tiện vào trang webtr. 89
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F4. Thêm dữ liệu đa phương tiện vào trang webtr. 122
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 5. Chèn hình ảnh, âm thanh, video và sử dụng khungtr. 54
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 5. Chèn hình ảnh, âm thanh, video và sử dụng khungtr. 54
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang webtr. 62–66
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang webtr. 62
Bắt đầu bằng một hình dung
Câu lạc bộ Phát thanh của trường vừa làm xong số đầu tiên: một bản tin dài bảy phút, có nhạc nền, có đoạn phỏng vấn bác bảo vệ và cả tiếng cười của mấy bạn lớp 10 lúc thu hỏng phải quay lại. Cả nhóm quyết định làm một trang giới thiệu để bạn bè trong trường ai cũng biết đến.
Ban đầu, các bạn định làm theo cách đơn giản nhất: chụp lại dàn máy thu âm, viết vài dòng kể về bản tin, rồi thêm câu ‘bạn nào muốn nghe thì nhắn tin cho nhóm mình nhé’. Nhưng làm vậy thì trang chỉ kể lại chứ chẳng cho ai nghe thấy gì. Người vào xem đọc xong vẫn không biết bản tin hay dở ra sao.
Điều cả nhóm thật sự muốn là: mở trang lên, thấy ngay một thanh nhỏ có nút bấm - bấm vào là bản tin phát ra. Bên dưới là một khung hình chữ nhật, bấm nút tam giác thì xem được đoạn phim quay hậu trường buổi thu âm. Và ở cuối trang, thay vì dán một dòng địa chỉ dài ngoằng, các bạn muốn có sẵn một tấm bản đồ chỉ đường tới phòng sinh hoạt, kéo qua kéo lại được ngay tại chỗ, không phải mở sang nơi khác.
Ba mong muốn ấy - nghe được, xem được, và đặt sẵn một thứ vốn nằm ở nơi khác vào ngay trang của mình - chính là ba việc mà bài học này sẽ chỉ cách làm.
Nội dung bài học
- 1) Hai thẻ đưa âm thanh và phim vào trang: <audio> và <video>
- 2) Các thuộc tính thường dùng của thẻ <video>
- 3) Định dạng tệp và chuyện trình duyệt có hỗ trợ hay không
- 4) Khung nội tuyến <iframe>: đặt nguyên một trang khác vào trang của mình
Tóm tắt lý thuyết cần nhớ
- Thẻ
<audio>chèn âm thanh, thẻ<video>chèn phim vào trang web; thuộc tínhsrcchỉ nguồn tệp, còncontrolshiển thị thanh điều khiển phát, tạm dừng và chỉnh âm lượng. - Các thuộc tính hay dùng của
<video>:width,heightđặt kích thước khung hình;autoplaycho tự phát,loopcho phát lặp lại,mutedđể tắt tiếng; phần chữ viết giữa cặp thẻ chỉ hiện khi trình duyệt không mở được phim. - Tệp phải có định dạng mà trình duyệt hỗ trợ thì mới nghe/xem được - an toàn nhất là
mp3cho âm thanh vàmp4cho phim, cònwebmnhẹ hơn nhưng mức hỗ trợ hẹp hơn. - Thẻ
<iframe>tạo khung nội tuyến, nhúng nguyên một trang web khác vào trang hiện tại (srclà trang được nhúng,widthvàheightlà kích thước khung) - dùng để nhúng video trực tuyến, bản đồ, biểu mẫu; luôn nhớ cân nhắc dung lượng tệp và tôn trọng bản quyền.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| img | im-mít | thẻ chèn ảnh Dùng để đưa một tấm ảnh vào trang web. |
| src | ét-rờ-xê | đường dẫn ảnh/video Là chỗ ghi đường dẫn tới tấm ảnh hoặc video cần hiện lên. |
| alt | ót | chữ mô tả ảnh Là dòng chữ mô tả tấm ảnh, sẽ hiện ra khi ảnh bị lỗi không tải được. |
| target | ta-gợt | nơi mở liên kết Cho biết liên kết sẽ mở ra ở đâu: ngay tab đang xem hay mở sang một tab mới. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 22 câu, chấm điểm tự động và giải thích từng câu sai.
<audio> hoặc <video> để người xem thấy thanh điều khiển phát, tạm dừng và chỉnh âm lượng?srccontrolsautoplaywidth
controls chính là thuộc tính yêu cầu trình duyệt vẽ ra thanh điều khiển. src chỉ cho biết tệp nằm ở đâu chứ không tạo nút bấm nào. autoplay chỉ khiến phim tự phát, người xem vẫn không có nút để tạm dừng. width chỉ đặt chiều rộng khung hình.<iframe><video><embed-web><table>
<iframe> tạo khung nội tuyến với src trỏ tới trang được nhúng. <video> chỉ nhận vào một tệp phim chứ không nhận cả một trang web. <embed-web> không phải là thẻ HTML. <table> dùng để trình bày dữ liệu theo hàng và cột.<video src="clip.mp4" width="400" controls loop muted>Trình duyệt chưa mở được đoạn phim này.</video>. Dòng chữ nằm giữa hai thẻ sẽ hiện ra khi nào?- Luôn hiện ngay bên dưới khung phim, như một lời chú thích.
- Hiện ra mỗi khi đoạn phim chạy hết một vòng và chuẩn bị lặp lại.
- Hiện ra khi người xem bấm nút tắt tiếng.
- Chỉ hiện ra khi trình duyệt không mở được đoạn phim.
<video> và </video> là phần dự phòng, chỉ hiện khi trình duyệt không hiển thị được đoạn phim. Nó không phải chú thích nên không luôn hiện; loop chỉ khiến phim lặp lại chứ không làm hiện dòng chữ; muted chỉ liên quan tới âm thanh.- a)Thuộc tính
controlscủa thẻ<video>giúp hiện thanh điều khiển để người xem tự bấm phát, tạm dừng và chỉnh âm lượng.Đúng - b)Thẻ
<iframe>chỉ dùng để chèn những tấm ảnh có kích thước lớn vào trang web.Sai - c)Nếu tệp phim có định dạng mà trình duyệt không hỗ trợ thì dù thẻ
<video>viết đúng cú pháp và đường dẫn chính xác, người xem vẫn không xem được.Đúng - d)Mọi tệp nhạc và video tìm thấy trên mạng đều được phép nhúng tự do vào trang web của mình, miễn là có ghi tên tác giả.Sai
- (a) Đúng -
controlslà thuộc tính yêu cầu trình duyệt hiển thị thanh điều khiển phát/tạm dừng/âm lượng. - (b) Sai -
<iframe>tạo khung nội tuyến để nhúng cả một trang web khác (bản đồ, biểu mẫu, trang phát video); chèn ảnh là việc của thẻ<img>. - (c) Đúng - trình duyệt chỉ mở được những định dạng nó giải mã được, nên chọn sai định dạng thì cú pháp có chuẩn đến đâu người xem cũng chỉ thấy khung trống.
- (d) Sai - tệp nhạc và video đều có bản quyền; ghi tên tác giả không thay thế được việc phải có quyền sử dụng, cần dùng sản phẩm tự làm hoặc tài nguyên có giấy phép cho phép.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 22 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.