video 태그 사용법 과 예제

audio 태그에 이어서 이번 시간은 video 태그에 관해서 다루어 본다.

video 태그는 영상을 재생 해주는 태그 이다.

사용법은 하기와 같다.

src 속성은 : 재생될 영상 파일의 위치를 나타낸다.

위 코드에서는 video 라는 폴더를 별도로 만들어서 rose 라는 영상을 넣어두었다.

controls 속성 : audio 태그와 마찬가지로 영상 컨트롤 바가 나타나도록 하는 속성이다.

이 속성이 없으면 영상재생 되지 않기에, 꼭 해당 속성을 넣어서 사용자가 영상을 제어할 수 있게 만들어 주어야 한다.

해당코드를 실행한 웹 페이지 결과이다.

재생 버튼을 클릭하면 영상이 잘 플레이 된다.

영상의 크기는 기본적으로 영상의 기본 사이즈 로 나온다.

크기를 조정하고 싶다면, 가로, 세로 속성값을 추가해야 한다.

width 와 height 속성을 추가했고, 사이즈 값을 설정 했다.

해당 사이즈는 숫자는 pixel 을 의미한다. 

참고로, 속성 값은 태그 안에서 순서 가 없기에 원하는 위치에 적어주면 된다

그리고, 속성을 적을때는 콤마는 생략한다. (콤마를 넣으면 오류가 발생)

웹 페이지에서 확인해보면 영상의 사이즈가 조절됨을 확인 할 수 있다.

영상파일 역시 브라우저에서 인식할 수 있는 포맷이 있다.

MP4, WebM,Ogg 파일이다. 현재 사파리 브라우저에서는 ogg 가 공식적으로 지원되지 

않음을 확인 할 수 있다.

비디오 태그 사이 즉, 비디오 콘텐츠 부분에는

source 라는 태그를 삽입할 수 있다. 이 역할은 해당 브라우저가 특정 비디오 파일 포맷을

지원하지 않을 경우 그 다음 비디오 파일을 실행하라는 의미이다.

비디오 태그 에는 controls 과 크기만 적어주고, source 에 순차적으로 실행될 비디오 파일의 포맷을 기재한다.

위 코드에서는 처음 ogg 를 실행하고, ogg 가 지원하지 않는다면 mp4를 실행하라는 뜻이다.

mp4 마저 지원하지 않을때는 오류내용을 텍스트로 보여주는 코드이다.

물론, source 태그가 없이 비디오 태그만으로도 비디오 재생은 가능하다.

감사합니다.