CLOSE SEARCH

HTML5 video tag

HTML5의 video 태그는 플러그인의 도움없이 비디오 파일을 재생하는 기능을 제공합니다. 이 태그는 audio 태그와 사용방법이 유사합니다.

가장 기본적인 사용법은 src 속성을 통해 재생할 비디오의 URL을 지정해 주는 것입니다.

video 태그는 다양한 속성을 제공하며, 이를 통해 비디오의 크기나 재생 방식 등을 지정할 수 있습니다. 자주 사용되는 속성은 다음과 같습니다.

  • width, height : 비디오의 크기를 설정합니다.
  • src : 비디오의 URL을 지정합니다.
  • controls : 재생 컨트롤을 기본적으로 표시합니다.
  • preload : 비디오를 미리 다운로드 합니다.
  • autoplay : 비디오를 자동으로 재생합니다.
  • loop : 비디오를 반복재생합니다.
  • poster : 비디오 재생 전에 표시할 이미지를 설정합니다.

controls 속성과 preload 속성은 위의 코드와 같이 HTML5 방식으로 설정하거나 controls=”controls” 와 같이 XHTML5 방식으로 설정할 수도 있습니다. 두 방식의 결과는 동일하므로 마음에 드는 방식을 사용하면 됩니다. 마지막에 있는 poster 속성은 비디오를 재생하기 전에 썸네일 이미지를 표시하거나, 재생 안내 이미지를 표시하는 등 다양하게 응용할 수 있습니다.

 

Support Mutiple Browser

웹 브라우저에 따라 재생할 수 있는 비디오 포멧이 다르기 때문에, 모든 브라우저를 지원하기 위해서는 source 태그를 사용해서 필요한 비디오 포멧으로 인코딩된 모든 파일을 나열해 주어야 합니다. http://html5test.com 에서 현재 브라우저가 지원하는 비디오 포멧을 확인할 수 있습니다.

source 태그의 src 속성에는 각 비디오 파일의 URL을 지정해 줍니다. type 속성은 비디오 파일의 포멧을 지정해주며 필수 속성은 아닙니다. 그러나 이 속성을 지정해 줄 경우 브라우저가 비디오 포멧을 확인하기 위해 파일을 미리 다운로드 해야 하는 불필요한 작업을 줄일 수 있고, 결과적으로 웹 서버에서 발생할 수 있는 트래픽 낭비를 줄일 수 있습니다.  이렇게 source 태그를 통해 여러 포멧의 비디오 파일을 나열해 두면, 각각의 브라우저가 자신이 재생할 수 있는 파일을 찾아 재생하게 됩니다.

source 태그를 통해 여러 포멧을 제공하는 방식은 HTML5의 audio 태그에서도 동일하게 사용됩니다.

 

Support Subtitles

video 태크는 곰플레이어나 팟플레이어와 같이 자막을 표시하는 기능도 제공합니다. 자막 파일의 .srt 확장자를 가지는 텍스트 파일이고 이 파일의 포멧은 다음과 같습니다.

srt 파일을 작성할 때는 각 자막 사이에 공백이 반드시 들어가도록 작성해야 합니다.

srt 태그는 source 태그와 유사하게 video 태그 내부에 작성하며, 다음 코드와 같이 각각의 자막 파일을 나열하여 다양한 언어에 대한 자막을 지원할 수 있습니다.

Filed under: Web