조회 수 456 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

HTML5 Video 태그는 아주 단순하다.javascript를 사용할 필요가 전혀없다. 모바일도 대부분 지원한다.

단점은 IE 9 이상의 브라우저에서 사용가능하다. 이하에서는 영상이 보이질 않는다.

어쩔수없이 IE8등에서 접근시에는 flash로 재생되도록 fullback 옵션 태그를 주어서 할 필요가 있다. 하지만,,

단점이 flash로 할경우,, http 스트리밍이 되지 않는다. 다운후에 재생하는 방식을 취하기 때문이다. 용량이 큰 경우 세월을 기다려야한다. 스트리밍이라 함은 타임 스킵이 되어야한다. 가능한 방법이 있긴하다.

flash로 스트리밍이 가능한 방법은 rtmp 프로토콜을 사용하면 되며, rtmp 미디어 서버를 구축해야한다. 이또한 어렵지 않으나


HTML5와 flash는 풀백으로 동시에 넣을 수가 있지만  HTML5와 rtmp를 동시에 해놓을 수 가 없다.

또한 RTMP로 ,flash로 해놓으면 모바일에서 볼수가 없다. 모바일에서 rtmp 주소를 가져오지 못하기도 하고 또한 flash를 이제 지원하지 않는 모바일 브라우저도 있기때문이다. opera같은..


따라서 대세는 앞으로 HTML5 가 아닌가 싶다. 모바일기기들의 사용이 늘어나고 미디어 컨텐츠에 대한 수요가 많아짐으로

이에 빠르게 대응할 수 있는 범용 태그가 아닌가 싶다.


간단히 태그는 이렇게만 주어도 된다.

<video width="720" height="406" class="video-js" controls preload poster="그림이미지">
      <source src="mp4주소" type='video/mp4' />

</video>


이 얼마나 간단한가..


HTML5플레이어들도 있다. 고유 스킨과 기능(키보드로 컨트롤볼륨,좌우, 전체화면 등..)을 갖추고있긴하나 간단히

위와 같이 함으로 브라우저에서 볼수가 있다. 단점은 IE9 하위버전은 되지 않는다는점.




?

  1. 유튜브 영상 삽입방법

    오브젝트 가로 폭 반응형 형태 <style type="text/css"> .video-container { margin: 0;padding-bottom: 75%; max-width: 100%; height: 0; position: relative;overflow: hidden;} .video-container iframe, .video-container object, .video-container embed...
    Date2016.02.05 By행복아이 Views8423
    Read More
  2. 윈도우7 wimboot 테스트

    jwplayer RTMP HTTP jwplayer("mediaplayer2").setup({ primary: "flash", width: "100%", height: 406, playlist: [{ sources: [ { file: "rtmp://one2.kr/mp4/mp4:lec/win7wimboot.mp4" }, { file: "http://one2.kr/mp4/lec/win7wimboot.mp4" } ] }] });
    Date2015.08.27 By행복아이 Views8281
    Read More
  3. 모나서버

    ㅇㅇㅇ jwplayer RTMP HTTP jwplayer("mediaplayer2").setup({ primary: "flash", width: 720, height: 406, playlist: [{ sources: [ { file: "rtmp://one2.kr:48600/mp4:mm/test.mp4" }, { file: "http://one2.kr/mp4/lec/win7wimboot.mp4" } ] }] });
    Date2015.10.27 By행복아이 Views7034
    Read More
  4. videojs

    Date2015.10.12 By행복아이 Views6661
    Read More
  5. flowplayer 6.0.3 html5

    6.0.3 이 최근입니다. 다운로드 하여 서버단에 넣고 다음과같이 줍니다. <!-- ~~>부분은 주석입니다. <!--스킨부분--> <link rel="stylesheet" href="/flowplayer/skin/functional.css" /> <!--j쿼리부분--> <script src="/flowplayer/jquery-1.11.2.min.js"><...
    Date2015.10.12 By행복아이 Views6560
    Read More
  6. OBS RTMP 웹 HLS모바일 생방송 테스트

    RTMP 1936 HLS 8080 NginX RTMP 에서 아래와 같이 설정하여야한다. nginx.conf #user nobody; worker_processes 1; error_log logs/rtmp_error.log debug; pid logs/nginx.pid; events { worker_connections 1024; } http { allow all; deny all; access_log l...
    Date2015.07.30 By행복아이 Views2113
    Read More
  7. 유튜브 라이브 테스트

    모니터를 보냄 jw로 jwplayer('mediaplayer').setup({ file: 'http://youtu.be/YfnTz987ZHg', width: "100%", height: 406 });
    Date2014.10.15 By행복아이 Views1927
    Read More
  8. ee

    https://youtu.be/3e5cyno4lJA
    Date2019.12.16 By행복아이 Views1297
    Read More
  9. flowplayer+ums RTMP 서브폴더

    $f("player", "/flowplayer2/flowplayer-3.2.18.swf", { clip: { url: 'rtmp://155.230.54.40:5119/vod/mov/2014/20140808GC/20140808GC_FunTime_Full.mp4', autoplay: false, provider: 'rtmp' }, plugins: { rtmp: { url: "/flowplayer2/flowplayer.rtmp-3....
    Date2014.09.04 By행복아이 Views1017
    Read More
  10. test

    http://one2.kr/live.htmdd
    Date2019.06.18 By행복아이 Views945
    Read More
  11. videoJS HLS

    <video id=example-video width=600 height=300 class="video-js vjs-default-skin" controls> <source src="http://one2.kr:8080/hls/nav.m3u8" type="application/vnd.apple.mpegurl" /> </video> <script src="/videojs/video.js"></script> <script src="/...
    Date2015.07.31 By행복아이 Views772
    Read More
  12. JWPlayer6 RTMP FLASH HTML5

    PC에서는 FLASH, 모바일에서는 HTML5로 재생되는 JWplayer6 아래와 같이 file 부분에 두가지를 주면 되는것 같다. 원 소스는 rtmp만 있었는데 우선적으로 jw는 primary값과 같이 flash로 동작하며 ,모바일에서 보여지기 위해서 HTML로 동작은 jw가 알아서 하기...
    Date2014.09.04 By행복아이 Views635
    Read More
  13. mp4 1080 flowplayer

    flowplayer 1080p영상 $f("player", "/flowplayer2/flowplayer-3.2.18.swf", { clip: { url: 'rtmp://one2.kr/vod/bnb1080.mp4', provider: 'rtmp' }, plugins: { rtmp: { url: "/flowplayer2/flowplayer.rtmp-3.2.13.swf" } } });
    Date2014.08.26 By행복아이 Views597
    Read More
  14. flow rtmp ums 0.3.0 서버

    $f("player", "/flowplayer2/flowplayer-3.2.18.swf", { clip: { url: 'rtmp://155.230.54.42:5119/mp4/nut720.mp4', autoplay: false, provider: 'rtmp' }, plugins: { rtmp: { url: "/flowplayer2/flowplayer.rtmp-3.2.13.swf", } } });
    Date2014.09.06 By행복아이 Views549
    Read More
  15. videojs HLS 2

    스타일 시트 사용. 역시 모바일에서 보이기. <script src="/videojs/video.js"></script> <script src="/videojs/videojs-media-sources.js"></script> <script src="/videojs/videojs.hls.min.js"></script> <video id="my_video_1" class="video-js vjs-defa...
    Date2015.07.31 By행복아이 Views532
    Read More
  16. jw HTML5 flash 테스트

    <script src="http://static.videoninja101.com/jwplayer/jwplayer.js"></script> <div id="mediaplayer"></div> <script type="text/javascript"> jwplayer("mediaplayer").setup({ id: 'player1', width: '320', height: '240', autostart: false, skin: "ht...
    Date2014.09.04 By행복아이 Views497
    Read More
  17. HTML5 Flash RTMP에 대한 생각

    HTML5 Video 태그는 아주 단순하다.javascript를 사용할 필요가 전혀없다. 모바일도 대부분 지원한다. 단점은 IE 9 이상의 브라우저에서 사용가능하다. 이하에서는 영상이 보이질 않는다. 어쩔수없이 IE8등에서 접근시에는 flash로 재생되도록 fullback 옵션 ...
    Date2014.09.12 By행복아이 Views456
    Read More
  18. video-js 3

    nginx RTMP 단독서버로 http 스트리밍 HTML5 +fallback flash (flowplayer, http) VideoJS.setupAllWhenReady();
    Date2014.09.11 By행복아이 Views443
    Read More
  19. flow http HTML5

    <link href="/flowplayer/skin/minimalist.css" rel="stylesheet" type="text/css" /> <style type="text/css"> .flowplayer { width: 720px; height:406px } </style> <script src="/flowplayer/jquery.min.js" type="text/javascript"></script> <script src...
    Date2014.09.05 By행복아이 Views430
    Read More
  20. HLS테스트

    모바일만, 즉 http만 있으므로 PC에서는 아마 안보일것. jwplayer("my-video").setup({ file: "http://one2.kr/hlsmp4/TEST2.m3u8"", width: "100%", androidhls:true, aspectratio: "16:9", primary: "flash" } ); 모바일(http) + PC rtmp (flash)가 둘다 잇...
    Date2015.01.15 By행복아이 Views406
    Read More
Board Pagination Prev 1 2 Next
/ 2