Task 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
background-color: black;
}
</style>
</head>
<body>
<h1>Video embed</h1>
<video
controls
width="320"
height="240"
muted
preload="auto">
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.webm" type="video/webm">
<track
label="English"
kind="subtitles"
srclang="en"
src="media/subtitles_en.vtt">
<p>
Your browser doesn't support this video file. Here is a
<a href="media/video.mp4">link to the vedio file</a> instead.
</p>
</video>
</body>
</html>
Task 3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;
}
iframe {
border: none;
}
</style>
</head>
<body>
<h1>Embedding</h1>
<object data="media/mypdf.pdf" type="application/pdf" width="800" height="400">
<p>
You don't have a PDF plugin, but you can
<a href="media/mypdf.pdf">download the PDF file.</a>
</p>
</object>
<hr>
<iframe width="400" height="300"
src="https://www.youtube.com/embed/0xJxgvJO2Xo"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13048.553638783429!2d129.1099112345843!3d35.1531687351307!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3568ed2f27c70ec7%3A0xff6df0e14d9216fb!2z6rSR7JWI66as7ZW07IiY7JqV7J6l!5e0!3m2!1sko!2skr!4v1665563009621!5m2!1sko!2skr"
width="400" height="300" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</body>
</html>
도움 받은 곳
https://discourse.mozilla.org/t/assessment-request-for-multimedia-and-embedding-skill-test-1/98246
깨달은 것
Task 2 : <track> 하나이면 default 속성을 따로 지정할 필요 없다.
Task 3
1. <embed>와 <object>의 차이
<embed> : 외부 콘텐츠 포함하는 요소 / <object> : 외부 개체 요소를 포함하는 요소
-> 이들을 페이지에 포함하는 것보다 다운로드하거나 별도의 페이지에서 읽을 수 있도록 링크하는 것이 좋으므로 많이 사용하지 않는다. (MDN)
-참고-
3.
<iframe width="400" height="300"
src="https://www.youtube.com/embed/0xJxgvJO2Xo"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
<p>
<a href="https://www.youtube.com/embed/0xJxgvJO2Xo">
Fallback link for browsers that don't support iframes
</a>
</p>
</iframe>이를 W3C markup validation service로 검사 했을 때
위와 같은 오류가 뜨는 것을 발견함. whatwg 사이트를 참고 했을 때, <iframe> 요소의 콘텐츠 모델(요소의 하위 및 하위 항목으로 포함되어야 하는 콘텐츠에 대한 규범적 설명-whatwg)은 아무것도 허용되지 않음.
그러므로 <p>와 <a>를 <iframe>내에 사용했을 때 오류가 뜨는 것이었다.
-참고-
https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element
찾아봐야 할 것
Task 2 :
1. preload 속성은 꼭 필요한가?
-> preload 속성은 미디어 리소스에 필요한 버퍼링의 양을 나타낸다. 작성자가 최고의 사용자 경험으로 이어질 것이라고 생각하는 것에 대한 힌트를 사용자 에이전트에 제공하기 위한 것이다. (WHATWG) 사용자에게 힌트를 제공하므로 작성하는 것이 좋아보인다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload
https://html.spec.whatwg.org/multipage/media.html#media-resource
2. webvtt의 시간과 숫자의 정해진 규칙
-> https://w3c.github.io/webvtt/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
3. <track>이 모든 <source> 뒤에 온다고 MDN 문서에 명시되어 있는데, 대체 콘테츠를 포함해서 맨 뒤에 위치하는 것인가?
-> 대체 콘텐츠가 <track>보다 뒤에 위치한다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track
Task 3 : <iframe>의 속성 sandbox를 쓰면 오류가 뜨는데 해결할 방법이 있나?
-> sandbox 속성은 콘텐츠에 대한 추가 제한 집합을 활성화한다. (출처)
youtube의 경우 sandbox의 속성 값으로 allow-same-origin, allow-scripts을 설정하면 해결되고, 구글 맵의 경우 allow-scripts를 설정하면 해결된다!
-출처-
https://web.dev/sandboxed-iframes/
https://stackoverflow.com/questions/68983187/google-maps-iframe-doesnt-work-with-sandbox
'HTML > MDN 평가' 카테고리의 다른 글
| MDN - Structuring planet data (0) | 2022.10.18 |
|---|---|
| MDN - Mozilla splash page (0) | 2022.10.15 |
| MDN - Media/embedding (0) | 2022.10.12 |
| MDN - Marking up a letter (0) | 2022.10.12 |
| MDN - Structuring a page of content (0) | 2022.10.12 |