웹 스트리밍을 통해

    동영상 재생하기








    1. 웹에서 스트리밍하기


    지난 시간에 스트리밍 서버를 구축하는 방법에 대해서 포스팅을 작성하였습니다. 하지만 지난번처럼 주소열기 방식으로는 반드시 동영상 플레이어가 필요합니다. 물론 단순한 스트리밍 정도의 수준이라면 모바일 어플에서도 지원합니다. 또한 유료어플중 WebDAV와 FTP서버를 지원하는 어플이라면 별다른 스트리밍을 설치하지 않아도 어플 자체적으로 스트리밍을 해서 영상을 재생합니다.


    하지만, 제가 원하는 스타일은 이런 것이 아니라 어플이 설치되지 않는 기기, 또는 동영상 플레이어가 설치되지 않은 환경에서 인터넷만 된다면 바로 재생할 수 있는 YouTube 같은 그런 서비스를 원했습니다.


    앞으로 HTML5태그 중 <video> 태그를 소개할 예정입니다. 하지만 이것 외에 외부 소스를 사용한다면 JWPlayer 와 VIDEO.JS라는 플레이어가 있습니다. 좀 더 강력한 기능을 가진 플레이어인데 다음에 기회가 되면 소개하도록 하겠습니다.


    인터넷만 되는 환경이라면 데스크탑이든 모바일이든 가리지 않고 동영상을 재생하는 그런 서비스를 구축하기 위해서, 약간은 번거롭지만 동영상 감상은 편리한 방법에 대해서 알아봅시다..




    2. HTML5에 대해


    새로운 HTML 태그 양식중에 웹 어플리케이션을 모두 담고, 간단한 명령어로 바꿔주는 태그가 존재합니다. 

    상단에 로고를 보면 HTML5라고 되어 있는데 이번에 소개드릴 HTML5 태그는 바로 강력한 어플리케이션 기능과 간단한 코드를 담고 있는 요즘 떠오르는 코드입니다.


    스마트폰이 본격적으로 보급되기 전 아이폰 또는 아이팟 터치가 막 나오던 시절을 떠올려보면 그런 모바일 기기에서 웹에 올려져 있는 동영상은 전혀 재생이 불가했습니다. 뭐, 현재도 재생 불가능한 동영상들은 많이 있지만 그 때는 유투브나 네이버 동영상 조차 재생이 불가하였습니다.


    그런데 어느순간 모바일 기기에서도 동영상 시청이 가능하게 되었는데, 그 계기가 바로 HTML5입니다.


    플래시(또는 외부 추가 프로그램)로 재생되던 동영상들이 하나둘씩 바뀌기 시작했고, 모바일 동영상 시장은 크게 변화하였습니다. 자체 코드 어플리케이션에서 동영상을 재생하는 방식인 HTML5는 플러그인 설치가 필요없이 바로 동영상이 재생 가능했기 때문에 모바일에서 재생이 가능했습니다.


    저도 기기를 가리지 않고 동영상을 재생하고 싶었기 때문에 이 HTML5 태그를 쓰기로합니다.


    HTML5 의 훌륭한 태그중 video 태그를 사용합니다.


    기존에 사용하던 <embed> 태그에서 간단히 <video>태그로 변경하는데 YouTube 태그를 복사해보신 분들은 알겠지만, 꽤나 복잡합니다. 특히 추가로 실행시켜야 하는 어플리케이션을 따로 입력해야 하기 때문에 태그 내용도 길어질 수 밖에 없었습니다.

    하지만, <video>태그는 아주 간단합니다.




    3. HTML5를 사용하기 위한 조건


    이렇게 편리한 HTML5 코드는 애석하지만 모든 환경에서 지원되지는 않습니다. 각 브라우저 별로 지원하는 환경이 다릅니다.


    브라우저 중에서 크롬, 파이어폭스, 사파리, 오페라 등은 HTML5를 지원합니다.

    대신 우리 나라에서 가장 많이 사용하는 브라우저인 인터넷 익스플로러는 버전별로 다릅니다. 

    익스플로러 9 이상은 HTML5를 지원하지만 그보다 낮은 버전은 지원하지 않습니다. (아직 XP 사용자이며, 다른 브라우저를 쓰지 않는 경우에는 HTML5태그 지원이 불가능합니다.)

    현재 사용하는 브라우저가 HTML5를 지원하는지 확인하려면 다음 사이트에 접속하지면 됩니다.


    http://html5test.com/


    그리고 이 <video> 태그를 이용하려면 반드시 필요한 조건파일 확장자가 mp4, ogg/ogv, webm 파일만 지원합니다. 다른 확장자는 생소하니 mp4로 되어있는 동영상만 지원하능한 것을 기억하면 될 것 같네요.



    4. 본격적으로 사용하기


    태그 삽입은 의외로 간단합니다.

    1. <video src="비디오파일주소"></video>
    끝입니다. 참 쉽죠? 대신 이렇게만 입력하면 단지 재생만 될 뿐이고 추가적인 소스가 필요합니다.
    1. <video src="비디오파일주소" controls loop muted autoplay poster="이미지주소">브라우저가 지원하지 못할 시 표시할 내용</video>
    위와 같이 추가적인 구성을 하면 됩니다.
    추가된 내용에 관해서 적어보면
    src="동영상주소" : 동영상 주소를 입력합니다. 예 - http://www.domain.com/동영상.mp4 
    controls : 동영상을 재생하고 탐색하기 위한 조정 바를 표시합니다.
    loop : 반복 설정합니다. 동영상이 계속 반복됩니다.
    muted : 음소거가 되도록 합니다.
    autoplay : 페이지가 로드되면 바로 동영상이 재생되도록 합니다.
    poster="이미지파일" : 동영상이 플레이 되기 전 대표로 보여줄 이미지파일을 지정합니다.

    일반적으로 사용하기 위해서는 이정도 쯤이면 적당합니다.

    1. <video src="비디오주소" controls>이 브라우저는 재생할 수 없습니다.</video>


    5. 재생가능한지 확인해보기


    새로 HTML파일을 만들어도 좋고, 게시판에 html태그로 입력해도 좋고 html를 사용할 수 있는 환경이면 어디든지 좋습니다. 브라우저 차원에서 지원되기 때문에 태그만 확실하면 됩니다.

    저는 조금 더 좋은 접근성을 위해 제 개인서버에 설치된 XE를 통해 실 사용을 해보도록 하겠습니다. 게시판 형태로 해서 앞으로 동영상들을 보기 쉽게 하기 위함입니다.


    글쓰기 기능중 소스보기로 변환해서 비디오 소스를 입력합니다.

     


    위에 적어 놓은 방법대로 입력을 하고 완료를 눌러서 글을 저장하도록 하겠습니다. 실제로 실행해 보니 아주 잘 되는 군요. 그리고 모바일에서 아무 문제없이 재생되는 것을 확인하였습니다. (아이폰, 아이패드)






    6. Sample 테스트


    Techslides.com 에서 제공한 샘플 동여상을 토대로 실제로 동영상이 어떻게 실행되는지 확인하세요.

    5초의 짧은 동영상이지만 이 video 태그가 어떻게 작동하는 지는 확인 하실 수 있습니다. 



    이제 웹 페이지에 동영상을 삽입하는 법을 배웠습니다. 가급적이면 게시판에서 동영상을 감상하기 위해서는 mp4파일로 준비를 하여야 하는데, 원래부터 mp4파일이면 다행이지만, 다른 형식의 파일인 경우에는 변환해야 하는데 그 인코딩 방법에 대해서는 다음시간에 소개를 하도록 하겠습니다.


    Posted by Study For Us clamp2x
    • 이전 댓글 더보기
    • 박노훈
      2015.10.21 12:20 신고

      주인장님 혹시~ video src 태그에다가 동영상 사이즈도 지정할수있나요~?

    • 박노훈
      2015.10.21 12:20 신고

      주인장님 혹시~ video src 태그에다가 동영상 사이즈도 지정할수있나요~?

    • 박노훈
      2015.10.21 12:20 신고

      주인장님 혹시~ video src 태그에다가 동영상 사이즈도 지정할수있나요~?

    • 박노훈
      2015.10.21 12:20 신고

      주인장님 혹시~ video src 태그에다가 동영상 사이즈도 지정할수있나요~?

    • 성준이
      2015.11.13 17:40 신고

      좋은 정보 감사합니다.
      HTML5 Video 태그는 쉽고 좋은데 가장 큰 단점이 오른쪽 마우스를 클릭하면 파일 다운로드가 가능하고 URL 주소도 쉽게 알수가 있어 보안상 너무 취약합니다. 이걸 막을 방법을 아무리 찾아봐도 찾을 수가 없네요. 혹시 방법이 있을까요?

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2015.11.13 22:56 신고

        마우스 우클릭을 제한하는 것 외에는 뽀족한 방법은 없습니다.

        단, video 태그에 대해서만 해당되는 이야기이고, JWplayer 같은 플레이어 소스를 이용하면 유투브처럼 플레이어를 따로 사용할 수 있으니 한번 사용해보세요.^^

    • 강무경
      2015.12.29 15:56 신고

      안녕하세요~ ^^;
      좋은 강좌 감사합니다.
      다름이 아니라...
      fullscreen 관련 문제 때문에...
      동일한 동영상 파일인데 어떤때는 fullscreen 버튼이 있고 어떤때는 fullscreen 버튼이 없고 합니다.
      활성화 비활성화가 아니라 있고 없고 입니다.
      뭐가 문제인건지...

      <!doctype html>

      이것을 넣어봐라

      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

      이것을 넣어봐라
      등 많은 내용들이 있기는 하던데...
      테스트 페이지로 만든건 fullscreen 버튼이 잘 나오는데, 문제는 서비스 할려고 하는 페이지는 안됩니다.
      물론 위에 적은 내용은 다 있구요.
      뭘 또 더 찾아봐야 하는건지...
      감사합니다.

    • gahangwun
      2016.01.05 14:51 신고

      윈도우 서버구축 여기까지 잘 따라왔는데 , 여기서 부터 잘 모르겠네요
      HTML5 태그 삽입을 어디로 들어가서 입력하는지 알려주시면 고맙겠습니다. 기초지식이 없어서요

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2016.01.05 14:55 신고

        이거는 서버 구축과는 별개인 웹 페이지를 구성하는 언어 입니다.
        이건 html에 대한 기초 지식이 있어야 하는 거라서 이 과정은 건너 뛰셔도 됩니다. ^^
        이 글 뒤에 미디어 서버를 쉽게 구축하는 방법(plex media server) 도 설명이 되어 있으니깐요. ^^

    • 자동재생
      2016.02.29 15:39 신고

      좋은 강좌 너무 잘보았습니다.
      video 태그에 autoplay를 설정한경우, 모바일 웹에서는 자동재생이 되지 않던데....
      혹시 이에 대한 다른방법이 있을까요? 유튜브처럼 동영상이 바로 재생되었으면 좋겠는데....

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2016.02.29 17:01 신고

        모바일에서는 유투브도 자동재생 안되지 않나요?
        모바일에서는 셀룰러 데이터가 쉽게 빠져나갈수 있으므로 자동재생은 안되는 걸로 알고 있습니다.^^

    • 자동재생
      2016.03.14 16:46 신고

      모바일 autoplay 에 관해서 질문 올렸었습니다.
      답으로 youtube에서도 모바일 자동재생은 안될거라 하셨는데,
      유튜브 어플리케이션이 아닌 웹브라우저를 통해서 보아도 자동재생이 가능합니다.
      혹시 이거에 대한 정보는없으신지 궁금합니다 ㅠㅠ

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2016.03.14 17:19 신고

        아마, 자동재생이 되게 하는 방식은 HTML5의 "video" 코드가 아닌 예전 방식인 "embed" 태그를 이용해서 실행했을 겁니다. 요즘에는 별로 추천하는 방식도 아니고 코드도 복잡해져서 잘쓰이지 않습니다.

        요즘 대부분 video 코드로 해서 지난번에 video 코드중에서만 생각을 했던 것같습니다.
        간단하게 설명을 하자면
        <embed src="동영상주소" autoplay=1 allowfullscreen=""true"></embed>정도만 하셔도 될겁니다.^^

    • 응디
      2016.03.15 10:34 신고

      좋은정보 감사합니다. 이렇게 쉽고 간편한 소스가 있었다니 HTML5를 공부를 해봐야겠네요
      혹시 번거로우시겠지만 홈페이지상에서 가로 800px로 지정했는데 모바일에서는 모바일 사이즈에 맞도록
      할수도있을까요? 그냥 자동으로두면 홈페이지에서는 너무 커보여서요!

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2016.03.15 11:13 신고

        저도 시도는 해보지 않았지만 아래처럼
        <video src="비디오주소" width=100% max-width="800px" controls></video>
        가변폭으로 너비를 지정하고 최대 너비를 800px로 잡으면 되지 않을까요?

        혹시 몰라 테스트 해보니 저는 잘 됩니다.^^

      • 응디
        2016.03.15 18:24 신고

        앗 답변 너무 감사합니다. 도움이 많이되었습니다!! 감사감사합니다~^^

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2016.03.15 18:33 신고

        도움이 되었다니 다행이네요~^^

    • 잭슨김
      2016.04.18 17:37 신고

      주인장님 혹시 네이버스포츠 중계같은것도 저희 홈페이지나 블로그에 실시간으로 스트리밍할수있을까요?

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2016.04.18 23:27 신고

        할수 있긴 하겠지만 그 과정이 간단하지는 않을 겁니다. IIS에서 실시간 스트리밍 서비스를 제공해주니 그 기능을 이용하는 방법도 있지요.^^

    • pjs
      2016.04.19 09:31 신고

      훌륭하네요!! 감사합니다 ^^


    • 2016.06.07 11:00

      비밀댓글입니다

    • 올리브
      2016.12.02 18:06 신고

      서버2008인데 똑같이 해보았는데 동영상이 안나오네요. 투명한 곳에 드래그 하면 동영상이 잡히긴 하는데 동영상은 아예 보이지도 나오지도 않습니다. 뭐가 문제일까요?

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2016.12.02 18:37 신고

        질문 내용이 부족해서 상세하게 답변 드리긴 어렵지만 몇가지 추측해보자면 이렇습니다.


        1. html5 형식이 지원되지 않는 동영상을 소스로 사용 > .avi .mpg 파일같은 html5 에서 재생 불가능한 동영상을 업로드 한경우 입니다.

        2. 접속한 브라우저가 오래된 브라우저라 html5 지원이 안된다.

        3. html5 태그입력할 때, 동영상 주소가 잘못되었다.

        이정도일 것 같습니다. 이 세가지 중에 잘못된 부분이 있는지 한번 검토해보시기 바랍니다.^^

    • rtmp
      2017.02.06 13:06 신고

      안녕하세요, adobe media flash server를 이용해 rtmp로 전송되는 스트리밍을 모바일에서도 작동시키고싶은데 이럴 경우 어떤 방식으로 응용을 해야하는지 모르겠습니다. rtmp를 이용해 데이터를 주고받으며 모바일,pc 둘 다 작동되게끔 할 순 없을까요? 조언을 구하고싶습니다.

    • BlogIcon dd
      2017.02.24 23:07 신고

      안녕하세요 . 혹시 기본 html5 비디오 태그를 지원하지 않는 사이트에서 다른 방식을 통하여 모바일 pc 모두 동영상을 볼 수 있는 방법이 있을지 궁금합니다..

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2017.02.24 23:16 신고

        html5 태그는 사이트에 관계 없이 클라이언트 브라우저에 따라 실행되는 것이기 때문에 큰 문제는 없어보입니다.

        하지만 html이 지원되지 않는 브라우저라면 별도의 플레이어를 구축해서 embed 태그를 이용하셔야 합니다.^^

    • Favicon of http://mihorima.tistory.com BlogIcon ミホリマ
      2017.04.01 01:15 신고

      안녕하세요, 좋은 정보 잘 얻어갑니다 ^^!
      질문 드리고 싶은 게 있어서 댓글 남겨봅니다. 혹시 HTML 5는 SMI 자막을 지원하게 하는 방법이 없나요?

    • okok
      2017.05.31 14:09 신고

      웹서버에 동영상을 올려두고 게시판 글쓰기에서 html 태그로 작성하였는데, '이 브라우저에서는 재생 불가능합니다.'라는 텍스트만 출력됩니다.ㅠ
      iframe 태그로는 동영상 스트리밍이 되는데..video는 왜 안될까요..
      <video src="웹서버ip/home/gnub/html/동영상파일명.ogv" controls>이 브라우저에서는 재생 불가능합니다.</video>
      크롬 58.0.3029.110 , 익스플로러 11버전

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2017.05.31 22:14 신고

        iframe으로는 특별한 소스를 사용해서 동영상을 재생가능하도록 한것 같습니다.

        해당 파일은 브라우저에서 재생시킬 수 있는 컨테이너가 아닌것 같습니다. ^^

      • okok
        2017.06.01 08:14 신고

        동영상 파일을 mp4로 변경해도 안되는데..
        웹페이지가 그누보드 기반입니다.
        혹시 영향이 있을까요?

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2017.06.01 08:16 신고

        src="http://나머지주소" 형태로 바꿔보세요. ^^

    • 체다요미
      2017.09.29 13:48 신고

      좋은 정보 감사합니다. 그런데 video태그를 사용하기 위해서는 꼭 mp4파일을 서버에 올린 후 링크해야 하나요? iframe처럼 유튜브 주소로 링크 걸어 사용할 수는 없는건가요? 해보고 있는데 잘 안되네요... 원래 안되는건지

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2017.09.29 14:13 신고

        유투브 같은 경우는 자체적인 플레이어를 사용을 해서 재생되는 경우기때문에 비디오 태그로는 동영상을 불러들일 수 없습니다.
        비디오 태그는 동영상 파일을 기반으로 불러와서 브라우저 자체 플레이어로 재생이 되는 겁니다. ^^

    • 파파덕
      2018.07.11 14:07 신고

      html5 video는 동영상 배속기능도 사용할수 있나요?사용하려면 어떻게 해애하나요?

      • Favicon of http://studyforus.tistory.com BlogIcon Study For Us clamp2x
        2018.07.11 14:38 신고

        배속 기능을 사용하려면 html5의 기술을 이용한 플러그인 이나 jwplayer같은 웹소스들을 사용하면 됩니다. ^^

티스토리 툴바