Test your skills: Multimedia and embedding - Learn web development | MDN
The aim of this skill test is to assess whether you understand how to embed video and audio content in HTML, also using object, iframe and other embedding technologies.
developer.mozilla.org
- Task 1
폴더 구조
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Media/embedding: Task 1</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
audio {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Basic audio embed</h1>
<audio controls>
<source src="media/audio.mp3" type="audio/mp3" />
<p>
Your brower doesn't support this audio file. Here is a
<a href="media/audio.mp3">link to the audio</a> instead.
</p>
</audio>
</body>
</html>
- Task 2
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Media/embedding: Task 2</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
video {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Video embed</h1>
<video
controls
width="320"
height="240"
poster="image.jpg"
preload="auto"
muted
>
<source src="media/video.mp4" type="video/mp4" />
<source src="media/video.webm" type="video/webm" />
<p>
Your brower doesn't support this video file. Here is a
<a href="media/video.mp4">link to the video</a> instead.
</p>
<track
kind="captions"
src="media/subtitles_en.vtt"
srclang="en"
label="English"
/>
</video>
</body>
</html>
- Task 3
폴더 구조
index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>Media/embedding: Task 3</title>
<style>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>Embedding</h1>
<!-- type는 임의로 만들었습니다 -->
<embed src="media/mypdf.pdf" type="application/pdf" />
<!-- PDF embed here -->
<hr />
<!-- 아무 동영상이나 삽입하였습니다 -->
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/lou5Cl523GA?si=UQe_e9XkGfRyPlqX"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
<!-- 3rd party embed here -->
</body>
</html>
오류 있으면 댓글 남겨주세요! 감사합니다!
728x90
'Computer > HTML, CSS, Javascript' 카테고리의 다른 글
| [HTML] 과제: 행성 데이터 구조화 (2) | 2024.10.15 |
|---|---|
| [HTML]과제: 반응형 이미지 (6) | 2024.10.15 |
| [HTML] 과제: HTML 이미지 (1) | 2024.10.13 |
| [HTML] 콘텐츠 페이지 구조화 (10) | 2024.10.13 |
| [HTML]과제: 문서 마크업하기 (2) | 2024.10.13 |
