image

video 태그

태그
Html
상세설명video 태그 사용법
작성일자2023.10.21

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

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

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

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

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

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

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