임베디드 요소
임베디드 요소는 우리가 직접 그 내용을 코드로 작성하는 것이 아니라 외부에 소스를 불러와서 웹페이지 내에 삽입하는 요소를 이야기합니다. 그렇기에 이미지나 비디오, 오디오 등의 멀티미디어요소들이 많이 해당이 됩니다.
구글에 sample mp4라고 검색하면 여러가지 샘플 영상을 찾을 수 있기에 실습시 이용을 해봐도 좋습니다.
2. <video>: 비디오 삽입 요소
<video> 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, <audio> 요소가 사용자 경험에 좀 더 적합합니다.
<video src="video/sample-mp4-file.mp4">
Sorry, your browser doesn't support embedded videos.
</video><video> 또한 <img> 요소와 비슷하게, 표시하고자 하는 미디어로의 경로를 src 특성에 제공합니다. 또한 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 특성을 통해 지정할 수 있습니다.
<img>태그가 내부 내용을 넣을 수 없었던 반면 <video>태그는 내부에 자식요소를 넣을 수 있으며, 브라우저가 정상적으로 작동하지 못할 때 출력되게 됩니다.
2-1 src속성 (Sorce)
삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 <source> (en-US) 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.
<video>
<source src="video/sample-mp4-file.mp4">
Sorry, your browser doesn't support embedded videos.
</video>2-2 controls속성
이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다. 속성의 기본 값은 false로 컨트롤러 패널이 보이지 않습니다.
2-3 autoplay속성
비디오를 자동 재생을 해줍니다. controls속성과 마찬가지로 boolean값을 가집니다. 하지만 비디오에 소리를 가지는 경우 autoplay가 true인 경우에도 자동재생이 되지 않는 경우가 있습니다. 이는 브라우저가 비디오가 사운드를 가지는 경우 autoplay를 막는 경우가 있기 때문으로, 이런 경우에는 muted속성을 통해 보완할 수 있습니다.
오디오 및 오디오를 가진 비디오를 자동으로 재생하는 사이트는 사용자 경험에 악영향을 끼칠 수 있으므로 피해야 합니다. 반드시 자동 재생을 제공해야 한다면 사용자의 명시적인 동의를 얻어야 하도록 해야 합니다. 그러나, 미디어 소스가 사용자의 선택에 의해 나중에 정해지는 경우라면 자동 재생이 유용할 수 있습니다.
2-4 muted속성
비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.
2-5 loop속성
부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.
2-6 height속성 & width 속성
비디오의 출력 영역의 높이와 너비이며, CSS 픽셀 단위입니다.
2-7 poster속성
사용자가 동영상을 재생하거나 탐색하기 전까지 출력되는 포스터 프레임 주소입니다. 이 속성이 명시되지 않으면, 첫 번째 프레임이 사용 가능하게 될때까지 아무것도 출력되지 않다가, 가능하게 되면 첫 번째 프레임을 포스터 프레임으로 출력합니다.
3. <audio>
<audio> 요소는 문서에 소리 콘텐츠를 포함할 때 사용합니다. src 특성 또는 <source> (en-US) 요소를 사용해 한 개 이상의 오디오 소스를 지정할 수 있으며, 다수를 지정한 경우 가장 적절한 소스를 브라우저가 고릅니다. MediaStream (en-US)을 사용하면 미디어 스트림을 바라볼 수도 있습니다. 대체로 video태그의 속성과 동일한 속성을 가집니다.
<figure>
<figcaption>Listen to the T-Rex:</figcaption> // figcaption도 함께 사용하면 좋습니다.
<audio
controls
src="/media/cc0-audio/t-rex-roar.mp3">
Your browser does not support the
<code>audio</code> element.
</audio>
</figure>audio element.
이번에는 비디오와 오디오가 동일하게 사용되는 multiple소스에 대해 설명해보도록 하겠습니다.
<audio controls>
<source src="foo.opus" type="audio/ogg; codecs=opus"/>
<source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
<source src="foo.mp3" type="audio/mpeg"/>
</audio>이렇게 소스가 다양하게 들어가 있는 경우 첫 번째 소스가 문제 없이 재생된다면 첫 번째 소스를 지원하고, 그렇지 않다면 차례차례 확인을 지원하게 됩니다.
4. <canvas>: 그래픽 캔버스 요소
<canvas> 요소는 HTML요소만으로는 할 수 있는 것이 별로 없으며 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 그래픽과 애니메이션을 그릴 수 있습니다. HTML을 통해 마크업을 하고 내부에 그림을 그린다던지의 동작은 자바스크립트를 통해 할 수 있습니다.
5. <iframe>: 인라인 프레임 요소
HTML <iframe> 요소는 중첩 브라우징 맥락을 나타내는 요소로, 현재 문서 안에 다른 HTML 페이지를 삽입합니다. 보통은 지도를 삽입할 때 많이 사용합니다.
