HTML5 video 태그 사용하여 동영상 재생시키기

By | 2010/11/25

  최근 동아리에서 HTML5를 동아리 회원들과 같이 공부하고 있습니다. HTML5는 아직 제대로 스펙조차 제대로 나오지 않았고 이를 지원하는 웹 브라우저도 거의 없어 아직은 사용함에 있어 문제가 많습니다. 하지만 훗날 이것이 대세는 아니더라도 어느 정도 자리를 잡을 것이라는 점을 예상하며 동시에 HTML 태그만으로 어플리케이션을 돌린다는 개념 자체가 신기하여 공부하기로 하였습니다.

  오늘 배운 내용은 video 태그를 이용한 동영상 재생입니다. 교재로 삼고 있는 책에 나와 있는 해당 예제들이 Google Chorme에서 잘 작동하는 것을 확인하였습니다.

  사용법은 매우 간단합니다.

<video src=”비디오 주소”></video>

  ‘비디오 주소’라는 곳에 말 그대로 비디오 파일 주소를 넣으면 되는 것입니다. 그것이 끝입니다!

  그런데 책에서는 Firefox3.5와 Google Chrome3에서 지원하는 대표적인 미디어 형식으로 Ogg-Theora-Vorbis를 얘기하고 있습니다. 그래서 지금 제가 가지고 있는 동영상 파일을 Theora 코덱으로 인코딩을 해보았습니다.

  방법은 ffmpeg2theora 라는 프로그램을 이용하면 됩니다. 이 프로그램을 이용하면 AVI 파일을 theora 코덱에 맞게 인코딩한 동영상 파일을 내놓습니다.

c0001

  사용법은 위의 스크린샷 처럼 명령 프롬프트로 들어가서 ffmpeg2theora 실행파일을 치신 후 뒤에 동영상 파일을 넣으시면 됩니다. 좀 더 자세한 옵션 등은 해당 프로그램 사이트에서 확인하실 수 있습니다.

  이렇게 하여 만들어진 파일의 확장자가 ogv 파일입니다. 이를 한 번 밑에서 HTML5를 이용하여 재생시켜 보겠습니다.

  잘 보이시는가요?^^

  혹시 보이시거나 혹은 안 보이시거나 하신다면 어떤 운영체제(Windows XP, Windows Vista, Windows 7, Linux, Unix, Mac OS)와 웹 브라우저(Internet Explorer, Firefox, Chrome, Safari, Opera 등)를 쓰시는지 댓글을 달아주신다면 감사 드리겠습니다.ㅜ

  간단히 video 태그를 이용하여 동영상 파일을 재생시키는 방법을 소개해드렸습니다. 그 외에 많은 것들을 HTML5에서 할 수 있으니 앞으로 공부함에 있어 기대가 많이 되고 있습니다.^^

참조

4 thoughts on “HTML5 video 태그 사용하여 동영상 재생시키기

  1. 게바라

    오홍 글잘 봤습니다 근데요~
    embed 태그와 video 태그의 차이는 무엇인가요?

    Reply
    1. NoSyu

      예를 들어 동영상 재생을 목적으로 embed를 사용한다면 이 동영상을 재생하기 위해 프로그램이 필요합니다. flv, swf와 같은 flash 파일이라면 flash player, avi, wmv, mp4와 같은 동영상 파일이라면 windows media player와 같은 프로그램이 필요합니다. 이런 프로그램에게 해당 파일을 재생하도록 얘기하는 것이지요.
      하지만 HTML5에서 제시하는 video는 이런 프로그램이 필요하지 않고 브라우저 안에서 동영상을 재생하도록 하는 듯싶습니다. 그것이 HTML5가 가지는 장점으로 현재 배우고 있습니다.
      배우고 있는 시점이라 잘못된 것이 있을 수 있으니 양해 부탁드립니다.ㅜ

      Reply
    1. NoSyu

      네.. 매우 간단합니다.^^
      하지만 이와 관련해서 여러 작업을 javascript와 함께 할 수 있습니다. 그래서 여러가지 일을 할 수 있을 것입니다.

      Reply

Leave a Reply