조회 수 310 추천 수 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. ee

    https://youtu.be/3e5cyno4lJA
    Date2019.12.16 By행복아이 Views1000
    Read More
  2. test

    http://one2.kr/live.htmdd
    Date2019.06.18 By행복아이 Views704
    Read More
  3. 유튜브 영상 삽입방법

    오브젝트 가로 폭 반응형 형태 <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행복아이 Views8169
    Read More
  4. 모나서버

    ㅇㅇㅇ 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행복아이 Views6785
    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행복아이 Views6207
    Read More
  6. videojs

    Date2015.10.12 By행복아이 Views6529
    Read More
  7. 윈도우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행복아이 Views8157
    Read More
  8. 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행복아이 Views433
    Read More
  9. 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행복아이 Views653
    Read More
  10. RTMP HLS2 1935 실시간

    1935포트 jwplayer('mediaplayer2').setup({ width: "100%", androidhls:true, aspectratio: "16:9", primary: "flash", sources:[ { file: "rtmp://one2.kr:1935/hls/nav" }, { file: "http://one2.kr:8080/hls/nav.m3u8"} ] });
    Date2015.07.31 By행복아이 Views263
    Read More
  11. 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행복아이 Views1975
    Read More
  12. 스마트폰 녹화 mp4테스트

    jwplayer("mediaplayer2").setup({ primary: "flash", width: 720, height: 406, playlist: [{ sources: [ { file: "rtmp://one2.kr/mp4/mp4:smart/SCR_20150115_151558.mp4" }, { file: "http://one2.kr/mp4/smart/SCR_20150115_151558.mp4" } ] }] });
    Date2015.01.15 By행복아이 Views269
    Read More
  13. 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행복아이 Views280
    Read More
  14. 유튜브 라이브 테스트

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

    Date2014.10.14 By행복아이 Views248
    Read More
  16. HTML5 Flash RTMP에 대한 생각

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

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

    $('audio,video').mediaelementplayer({ success: function(player, node) { $('#' + node.id + '-mode').html('mode: ' + player.pluginType); } });
    Date2014.09.11 By행복아이 Views263
    Read More
  19. 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행복아이 Views389
    Read More
  20. 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행복아이 Views286
    Read More
Board Pagination Prev 1 2 Next
/ 2