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

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

videojs의 조합을 보자.


PC브라우저및 모바일에서는 HTML5로 기본재생이 되고, PC브라우저에서 HTML5를 지원하지 못하는 경우(IE8등)에

FLASH로 재생되게 한다. 스크립트는 다음과 같다.


<script src="/videojs/video.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    VideoJS.setupAllWhenReady();
  </script>

  <link title="Video JS" href="/videojs/video-js.css" rel="stylesheet" type="text/css" media="screen" />

<div class="video-js-box">
   <video width="720" height="406" class="video-js" id="example_video_1" preload="auto" controls="controls">
      <source src="http://one2.kr:8080/rtmp/TEST.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <object width="720" height="406" class="vjs-flash-fallback" id="flash_fallback_1" data="/flowplayer2/flowplayer-3.2.18" type="application/x-shockwave-flash"><param name="allowscriptaccess" value="never" />
        <param name="movie" value="/flowplayer2/flowplayer-3.2.18.swf" />
        <param name="allowfullscreen" value="true" />
        <param name="flashvars" value='config={"playlist":[{"url": "http://one2.kr:8080/rtmp/TEST.mp4","autoPlay":false,"autoBuffering":true}]}' />

</object></video><p>


하지만 이 방식에서 문제점은 flash풀백의 경우 http 로 되어있기때문에 PC브라우저에서 다운로드후 재생이 되어버린다.


따라서 videojs에서 제대로 된 풀백이 될려면.

flash부분에서 rtmp프로토콜을 사용하는 방식으로 바꾸어주면된다. 위같은 object방식에서 어떻게 바뀌어야될지 공부가 필요.


샘플영상.

HTML5(IE9+, 모바일), Flash(IE8이하)




List of Articles
번호 제목 글쓴이 날짜 조회 수
29 video js 자막 옵션 행복아이 2014.09.11 229
» HTML5 fullback flash (videojs + Flowplayer) 행복아이 2014.09.12 142
27 http streaming 코드 행복아이 2014.09.11 138
26 video-js 게시판입니다. 행복아이 2014.09.05 132
25 videojs +jw fallback 행복아이 2014.09.12 124
24 videojs rtmp 행복아이 2014.09.12 123
23 videojs + flash mediaelement fallback 행복아이 2014.09.12 118
22 자동실행 행복아이 2019.06.21 78
21 실시간방송 HLS 모바일용 file 행복아이 2015.07.31 71
20 hls pc 및 모바일 행복아이 2019.06.21 70
19 knubs 96 행복아이 2019.06.21 70
18 test 행복아이 2015.10.12 56
17 hls 속도테스트 행복아이 2019.06.21 55
16 영상 테스트 행복아이 2015.10.12 55
15 videojs 4.8.8 flash 지원(non-html5) rtmp 행복아이 2014.09.22 55
14 rtmp 실시간 PC 만 행복아이 2017.11.01 50
13 mp3 멀티미디어 행복아이 2014.09.25 49
12 HLS m3u8 ie 테스트 PC 및 모바일 모두 HTML5로 재생됨 행복아이 2019.06.20 38
11 XE에서 HTML5 애드온 작동시 행복아이 2014.09.24 32
10 오디오 js 행복아이 2014.09.24 28
Board Pagination Prev 1 2 Next
/ 2