video 태그

<video /> 태그를 통해 문서에 비디오를 다음과 같이 삽입할 수 있다.

<!--방법 1-->
<video src="비디오 경로"></video>

<!--방법 2-->
<video>
  <source src="비디오 경로"></source>
</video>

 

video 태그에서 사용 할 수 있는 속성

• autoplay : 비디오가 실행될 준비가 끝나는 대로 자동으로 실행됨
• controls : 플레이 버튼이나 정지 버튼과 같이 비디오의 실행을 제어할 수 있는 제어기가 표시됨
• width : 비디오의 너비를 픽셀(pixel) 단위로 명시함
• height : 비디오의 높이를 픽셀(pixel) 단위로 명시함
• loop : 비디오의 재생이 끝나면 자동으로 또다시 재생됨
• muted : 비디오의 음성 출력이 음소거 됨
• poster : 브라우저나 인터넷 문제등으로 영상을 재생할 수 없을 경우 표시
• preload : 페이지가 로드될 때 오디오 파일이 같이 로드되어야 하는지 여부
• src : 비디오 파일의 URL

 

See the Pen videoTag by pminsun (@pminsun) on CodePen.

 

Chrome에서 video autoplay 오류 해결

재생하려는 비디오를 음소거이거나, 재생하려는 비디오의 음량이 0이여야 한다.

<div className="border border-gray-200 dark:border-gray-700">
  <video src={blockContent.video.file.url} autoPlay loop muted />
</div>