HTML - video, source 요소

웹브라우저에서 동영상컨텐츠를 제공하고 싶다면 <video> 요소를 사용 할 수 있다.

<video>
      <source
        src="/src/assets/video/google-developer-stories.mp4"
        type="video/mp4"
      />
      <source
        src="/src/assets/video/google-developer-stories.ogg"
        type="video/ogg"
      />
      <source
        src="/src/assets/video/google-developer-stories.mov"
        type="video/mov"
      />
      <source
        src="/src/assets/video/google-developer-stories.webm"
        type="video/webm"
      />
    </video>

 

<source src="" type=""> 동영상 콘텐츠는 src에는 영상 경로를, type에는 비디오 코덱 속성을 명시하면 브라우저에서 지원하는 코덱에 따라 그에 맞는 영상을 렌더링한다.

 

주요 속성으로는 controls(컨트롤러 제공), mute(실행시 음소거), poster(썸네일), autoplay(자동재생)가 있으며 자막파일을 제공한다면 <track> 요소를 사용해서 자막있는 동영상을 렌더링 할 수도 있다. src 속성으로 자막파일 경로를 명시해주고 kind는 자막의 유형 srclang은 제공언어의 코드 lang은 자막 선택시 표시될 이름을 나타낸다.

 

<video controls muted poster="/src/assets/video/poster.jpg">
      <source
        src="/src/assets/video/google-developer-stories.mp4"
        type="video/mp4"
      />
      <track
        src="/src/assets/video/stories-en.vtt"
        kind="subtitles"
        srclang="en"
        label="English Caption"
      />
    </video>