글 작성자: juyoungit

<video>

웹 페이지에 비디오를 표시하는 데 사용한다.

<!DOCTYPE html>
<html>
<body>

<h1>웹 페이지에서 비디오 사용하기</h1>

<video width="320" height="240" controls>
  <source src="./media/test.mp4" type="video/mp4">
  Your browser does not support the video tag.
  사용중인 브라우져가 비디오 태그를 지원하지 않습니다.
</video>

</body>
</html>
실행결과, 다음과 같이 비디오를 웹페이지상에서 사용할 수 있다.

src에 비디오 파일의 경로 작성할 때 정확하게 경로를 작성할 수 있도록 주의하자

 

동작원리

이전에 위에서 사용한 코드와 함께 살펴보도록 하자

<video width="320" height="240" controls>
  <source src="./media/test.mp4" type="video/mp4">
  Your browser does not support the video tag.
  사용중인 브라우져가 비디오 태그를 지원하지 않습니다.
</video>

controls 속성은 비디오 재생, 일시정지, 볼륨조절과 같은 비디오 컨트롤을 추가해주는 역할을 한다.

항상 html로 비디오를 사용할 때에는 width, height 속성을 포함해주는 것이 좋다.

(width와 height를 설정하지 않으면 비디오가 로딩되는 동안 페이지가 깜빡일 수 있다.)

 

<source> 태그를 사용하면 웹페이지에서 보여줄 비디오 파일을 지정할 수 있다.

웹 브라우져는 처음으로 인식되는 형식을 사용한다.

(이 부분에 대해서 차후에 좀 더 자세히 언급하도록 하겠다.)

 

<video> </video> 태그 사이의 텍스트는 <video> 태그를 제대로 지원하지 않는 브라우져 상에서 표시된다.

 

autoplay(자동재생)

autoplay 속성을 사용하면 별도의 재생버튼 클릭없이 비디오가 자동재생 되도록 설정할 수 있다.

<video width="320" height="240" autoplay>
  <source src="./media/test.mp4" type="video/mp4">
  Your browser does not support the video tag.
  사용중인 브라우져가 비디오 태그를 지원하지 않습니다.
</video>

 

'Web Basic > HTML' 카테고리의 다른 글

HTML Audio(오디오)  (0) 2020.07.23
HTML Multimedia(멀티미디어)  (0) 2020.07.23
HTML input types(입력유형)  (0) 2020.07.21
HTML Form Elements  (0) 2020.07.21
HTML forms  (0) 2020.07.21

티스토리툴바