웹에 이미지를 넣는 것처럼 영상이나 오디오를 넣을 수 있다. HTML5부터 video 태그가 추가됨으로써 기존에 문제가 많았던 Flash는 더 이상 사용하지 않게 됐다. 이번 챕터에서는 웹사이트에서 멀티미디어를 구현하는 코드를 살펴본다.
웹사이트에 영상 넣기
CONTENTS
비디오 태그 video
Html5에서 추가한 video 태그 덕택에 웹사이트에 영상을 매우 간단하게 삽입할 수 있다.
<video src="https://www.w3schools.com/html/mov_bbb.ogg" controls="controls" width="600">
</video>
위와 같이 video 코드에 src 속성에 영상이 담긴 url를 넣어주면 된다. 이미지를 넣을 때와 동일한 방법이다. 이미지를 넣을 때처럼 wodth, height 속성을 사용해 크기를 지정할 수 있으며, 자동 영상이 되지 않도록 controls 속성을 추가했다. 하지만 최근에는 video에 src 속성을 바로 사용하지 않고 source 태그를 사용하는 추세이다.
<video controls="controls" width="600">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
</video>
위와 같이 웹사이트에 비디오를 삽입할 때 video 태그에 기본적인 속성은 넣어주되, 영상 소스는 source 태그에 src 속성을 사용하는 방식이 일반적이다.
여기서 동영상 캡션까지 추가할 때 video 태그 안에 p 태그를 추가해 동영상 설명을 넣기도 한다. 하지만 최근에는 figure 태그를 사용해 껍데기로 사용하고 figcaption 태그로 캡션을 넣는 방식을 사용한다.
<figure>
<video controls="controls" width="600">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
</video>
<figcaption>이 영상은 w3schools 사이트에서 가져옴</figcaption>
</figure>
오늘날 영상은 대부분 figure 태그로 감싼 후에 사용하는 추세이다. 영상 소스는 mp4가 가장 많이 사용하지만, 이외에도 ogg, webm, mov, avi 확장자를 지닌 파일 소스 들도 사용된다. 이때 source 태그에 type 속성에 속성값에 video 다음에 영상 확장자를 넣어주어야 한다.
더불어 video 태그에 필요한 속성들을 추가할 수 있는데, 이미지처럼 기본적으로 width, height는 가능하고 영상이 바로 실행하도록 하는 autoplay 또는 컨트롤을 표시하는 controls, 영상은 바로 실행하지만 소리가 나지 않도록 하는 muted 속성이 많이 사용된다.
이외에도 반복 속성인 loop, 동영상이 재생하기 전에 이미지를 나타나는 poster, 영상을 재생하기 전에 모두 불러올지를 결정하는 preload 속성 등도 있다. 기본적으로 비디오 태그에는 controls만 사용하거나 muted autoplay 속성을 넣는다고 생각하면 된다.
비디오 태그 캡션(미완)
