정보실

웹학교

정보실

html HTML`video` 태그

본문

비디오 태그를 사용하면 HTML 페이지에 비디오 내용을 포함 시킬 수 있습니다.


이 요소는 getUserMedia() 또는 WebRTC를 통해 웹캠을 사용하여 비디오를 스트리밍하거나 src 속성을 사용하여 참조하는 비디오 소스를 재생할 수 있습니다.

<video src="file.mp4" />


기본적으로 브라우저에는 이 요소에 대한 컨트롤이 아닌 비디오 만 표시됩니다.


즉, 자동 재생 (나중에 자세히 설명)으로 설정 한 경우에만 오디오가 재생되고 사용자는 중지, 일시 중지, 음량 조절 또는 비디오의 특정 위치에서 건너 뛰는 방법을 볼 수 없습니다.


내장 컨트롤을 표시하기 위해 controls 속성을 추가 할 수 있습니다.

<video src="file.mp4" controls />


컨트롤은 사용자 정의 스킨을 가질 수 있습니다.


type 속성을 사용하여 비디오 파일의 MIME 유형을 지정할 수 있습니다. 설정하지 않으면 브라우저가 자동으로 확인하려고 합니다.

<video src="file.mp4" controls type="video/mp4" />


기본적으로 비디오 파일은 자동으로 재생되지 않습니다. 자동 재생 속성을 추가하여 오디오를 자동으로 재생하십시오.

<video src="file.mp4" controls autoplay />


일부 브라우저는 자동 재생을 위해 음소거 속성이 필요합니다. 음소거 된 경우에만 비디오가 자동 재생됩니다.

<audio src="file.mp3" controls autoplay muted />


loop 속성은 설정된 경우 0:00에 비디오 재생을 다시 시작합니다. 그렇지 않으면 비디오가 파일의 끝에서 중지됩니다.

<video src="file.mp4" controls autoplay loop />


이미지를 포스터 이미지로 설정할 수 있습니다.

<video src="file.mp4" poster="picture.png" />


없는 경우 브라우저는 비디오의 첫 번째 프레임이 표시되는 즉시 표시합니다.


너비 및 높이 속성을 설정하여 요소가 차지하는 공간을 설정하여 브라우저가 해당 요소를 처리 할 수 ​​있고 레이아웃이 로드 될 때 레이아웃을 변경하지 않도록 할 수 있습니다. 픽셀로 표시되는 숫자 값이 필요합니다.


JavaScript를 사용하면 비디오 요소에서 발생하는 다양한 이벤트를 들을 수 있습니다. 가장 기본적인 것은 다음과 같습니다.

  • play 파일 재생이 시작될 때
  • pause 비디오가 일시 정지되었을 때
  • playing 비디오가 일시 정지에서 다시 시작될 때
  • ended 비디오 파일의 끝에 도달했을 때




  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 46회 ]  작성일19-08-16 15:32

웹학교