임베디드 요소는 우리가 직접 그 내용을 코드로 작성하는 것이 아니라 외부에 소스를 불러와서 웹페이지 내에 삽입하는 요소를 이야기합니다. 그렇기에 이미지나 비디오, 오디오 등의 멀티미디어요소들이 많이 해당이 됩니다.
구글에 sample mp4라고 검색하면 여러가지 샘플 영상을 찾을 수 있기에 실습시 이용을 해봐도 좋습니다.
<video>: 비디오 삽입 요소<video> 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. 오디오 콘텐츠에도 사용할 수 있으나, <audio> 요소가 사용자 경험에 좀 더 적합합니다.
<video src="video/sample-mp4-file.mp4">
Sorry, your browser doesn't support embedded videos.
</video>
<video> 또한 <img> 요소와 비슷하게, 표시하고자 하는 미디어로의 경로를 src 특성에 제공합니다. 또한 비디오의 너비와 높이, 자동재생과 반복 여부, 브라우저 기본 컨트롤 노출 여부 등 다른 정보도 특성을 통해 지정할 수 있습니다.
<img>태그가 내부 내용을 넣을 수 없었던 반면 <video>태그는 내부에 자식요소를 넣을 수 있으며, 브라우저가 정상적으로 작동하지 못할 때 출력되게 됩니다.
삽입(embed)할 동영상의 주소(url)입니다. 이 속성은 선택 사항으로, 비디오 블록 내의 <source> (en-US) 요소를 사용하여 삽입할 동영상을 명시할 수도 있습니다.
<video>
<source src="video/sample-mp4-file.mp4">
Sorry, your browser doesn't support embedded videos.
</video>
이 속성이 존재하면, 소리 조절(volume), 동영상 탐색(seek), 일시 정지(pause)/재시작(resume)을 할 수 있는 컨트롤러를 제공합니다. 속성의 기본 값은 false로 컨트롤러 패널이 보이지 않습니다.
비디오를 자동 재생을 해줍니다. controls속성과 마찬가지로 boolean값을 가집니다. 하지만 비디오에 소리를 가지는 경우 autoplay가 true인 경우에도 자동재생이 되지 않는 경우가 있습니다. 이는 브라우저가 비디오가 사운드를 가지는 경우 autoplay를 막는 경우가 있기 때문으로, 이런 경우에는 muted속성을 통해 보완할 수 있습니다.
오디오 및 오디오를 가진 비디오를 자동으로 재생하는 사이트는 사용자 경험에 악영향을 끼칠 수 있으므로 피해야 합니다. 반드시 자동 재생을 제공해야 한다면 사용자의 명시적인 동의를 얻어야 하도록 해야 합니다. 그러나, 미디어 소스가 사용자의 선택에 의해 나중에 정해지는 경우라면 자동 재생이 유용할 수 있습니다.
비디오에 포함되어 있는 오디오의 기본 설정을 나타내는 부울 속성입니다. 설정하면 오디오가 나오지 않습니다. 기본 값은 false이며 이는 비디오가 재생되면 오디오도 같이 재생됨을 의미합니다.
부울(boolean) 속성, 이 값이 설정되면, 동영상 재생이 마친 후(동영상의 마지막에 도달하면) 자동으로 처음으로 돌아갑니다.