HMTL 태그: <video>비디오</video>

 

 

 

실시간 화상채팅을 하기 위한 예시

<video id="myFace" autoplay playsinline muted width="400" height="400"></video>

 

영상을 업로드하기 위한 예시

<video controls preload="metadata">

  <!--mp4와 webm은 동영상 형식을 의미한다. -->
  
  <source src="example.mp4" type="video/mp4">
  <source src="example.webm" type="video/webm">
  
  <!-- 아래 문구는 만약 영상재생을 지원하지 않는 브라우저에서만 보인다.-->
  
  This browser doesn't support video
  이 브라우저는 동영상 재생을 지원하지 않습니다.
</video>

 

Attribute (속성)

 

• autoplay: 자동재생
  비디오가 페이지에 로드되자마자 자동으로 재생되게 하는 속성
  
  요즈음에는 마우스 커서를 올렸을 때,
  임시 재생화면을 따로 제공하는 게 유행이라 웹페이지에서는 잘 쓰이지 않는다.
  
  하지만 web으로 구동되는 실시간 영상통화 어플에는 여전히 유용하다.
   
• controls: 조작패널
  유저와 상호작용하기 위한 기본 조작 ui를 추가하는 속성.
  
  재생, 정지, 볼륨조절, 재생장면 이동 등의 기능을 제공한다.
  
  
  
• loop: 루프
  영상재생이 끝났을때 다시 처음부터 재생하게 하는 속성
  
  
• muted: 침묵
  영상의 소리를 완전히 제거하는 속성
  
  
• poster: 포스터
  
  영상이 재생되기전 썸네일, 포스터를 등록하게 해 주는 속성
  string으로 설정 이미지를 입력해 준다.

<video poster="example.jpg">

• preload:  페이지가 로드되고, 유저가 영상 재생을 누르지 않았을 때
  영상을 어느 만큼 다운로드할지 정하는 속성
  
  "auto", "metadata", "none" 중 하나의 값을 대입할 수 있다.
  
  데이터 절약모드 페이지에선 metadata나 none 속성을 사용한다.
  
  

auto	metadata	none
전부 다운로드	메타 데이터만 다운로드	다운로드 안함

 

• playsinline: 애플 기기 (ios 운영체제 탑재 기기)에서만 작동하는 속성.
  
  영상이 inline 형식으로 전환된다.
  가끔 모바일 기기로 영상을 재생할 때, 비디오가 전체화면이 되는 것을 방지하는 데 사용된다.
   
• width: 영상의 너비픽셀을 설정하는 속성
• height: 영상의 높이픽셀을 설정하는 속성

 

 

읽어주셔서 감사합니다.

 

오탈자나 오류가있으면 댓글로 알려주세요.