HTML5 Video(비디오)

<video width="320" height="240" controls>
　　<source src="movie.mp4" type="video/mp4">
　　<source src="movie.ogg" type="video/ogg">
브라우저는 Video 태그를 지원하지 않습니다.
</video>

동시에 <video> 요소는 width와 height 속성을 제공하여 비디오의 크기를 제어합니다. 높이와 너비를 설정하면 페이지 로드 시 필요한 비디오 공간이 유지됩니다. 이러한 속성을 설정하지 않으면 브라우저는 비디오의 크기를 알 수 없으며, 페이지는 원래 비디오의 크기에 따라 변경됩니다.

<video>와</video> 태그 사이에 삽입된 내용은 video 요소를 지원하지 않는 브라우저에 표시됩니다.

<video> 요소는 여러 <source> 요소를 지원합니다. <source> 요소는 다른 비디오 파일을 링크할 수 있습니다. 브라우저는 첫 번째 인식 가능한 형식을 사용합니다:

비디오 형식과 브라우저의 지원

현재, <video> 요소는 MP 형식의 세 가지 비디오 형식을 지원합니다:4, WebM, 및 Ogg:

• MP4 = H.264 비디오 인코딩과 AAC 오디오 인코딩을 포함한 MPEG 4 파일

• WebM = VP8 VP 비디오 인코딩과 AAC 오디오 인코딩을 포함한 WebM 파일

• Ogg = Theora 비디오 인코딩과 Vorbis 오디오 인코딩을 포함한 Ogg 파일

비디오 형식

HTML5 <video> - DOM을 통해 제어

HTML5 　<video>와 <audio> 요소도 메서드, 속성 및 이벤트를 가지고 있습니다.

<video>와 <audio> 요소의 메서드, 속성 및 이벤트는 JavaScript를 통해 제어할 수 있습니다.

이 메서드는 재생, 일시정지 및 로드 등을 위해 사용됩니다. 속성(예: 길이, 볼륨 등)은 읽거나 설정할 수 있습니다. DOM 이벤트는 예를 들어, <video> 요소가 재생 시작, 일시정지, 종료 등을 알려줍니다.

이 예제는 <video> 요소를 사용하여 속성을 읽고 설정하는 방법과 메서드를 호출하는 방법을 단순히 보여줍니다.

온라인 예제 1

비디오를 간단하게 재생하려면/일시정지 및 크기 조정 컨트롤: