html 동영상 삽입 태그
■ 홈페이지를 만들 때 아주 간단하게 동영상을 삽입할 수 있는데요. <video> 태그를 이용해서 삽입하면 됩니다. <video> 태그는 'html5' 부터 사용할 수 있습니다. 참고하시구요. 형식은 다음과 같습니다.
<video src="동영상 파일 경로" width="가로폭" height="세로폭" controls></video>
■ 여기서는 이 글을 작성하면서 바로 예제를 만들고 있어서... 따로 업로드 하지는 않고 html 문서와 동영상 파일을 같은 폴더에 넣어놓고, 파일 경로에는 이름만 입력해서 진행할게요. 속성 중에서 가로 폭과 세로 폭은 미디어 재생장치의 크기를 설정해주는 속성이구요. 마지막 controls는 재생, 일지 정지 등을 할 수 있는 '컨트롤 막대'를 표시하는 속성입니다. 이 control 속성을 넣지 않으면 동영상을 오른쪽 마우스 클릭해서 컨트롤 할 수 있기는 한데요. 사용자 입장에서는 많이 불편합니다. 될 수 있으면 넣어주는 게 좋겠죠?
■ 동영상 삽입 태그 형식을 생각하면서 예제를 하나 만들어보겠습니다.
■ 너무 간단하죠? 파일 경로는 같은 폴더에 있기 때문에 이름만 입력했구요. 가로 600, 세로 400 크기의 동영상 재생 화면을 설정하고 컨트롤 막대가 나타나도록 설정했습니다. 브라우저에 확인해볼게요.
■ 이렇게 설정한 그대로 동영상이 삽입됩니다.
마지막으로 <video>태그의 속성들을 몇 가지 살펴보고 마무리할게요. 속성에는 가로와 세로, 컨트롤 막대 외에도 autoplay와 loop 속성이 있는데요. autoplay는 동영상을 자동으로 재생하는 속성이구요. loop는 반복 재생 속성입니다. 상황에 맞게 두 속성을 이용하시면 좋겠죠? 이 속성들을 이용할 때는 다음과 같은 형식으로 값을 넣어주면 됩니다.
<video src="파일 경로" width="가로" height="세로" controls autoplay loop></video>
이렇게 속성을 연속해서 입력해주시면 됩니다. 수고하셨어요.
