조회 수 340 추천 수 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 HLS m3u8 ie 테스트 PC 및 모바일 모두 HTML5로 재생됨 행복아이 2019.06.20 481
28 hls pc 및 모바일 행복아이 2019.06.21 662
27 hls 속도테스트 행복아이 2019.06.21 695
26 hls 실시간 테스트 행복아이 2019.06.14 208
» HTML5 fullback flash (videojs + Flowplayer) 행복아이 2014.09.12 340
24 http mp4 video 행복아이 2019.06.14 208
23 http streaming 코드 행복아이 2014.09.11 895
22 knubs 행복아이 2019.06.21 450
21 knubs 96 행복아이 2019.06.21 505
20 mp3 멀티미디어 행복아이 2014.09.25 234
19 rtmp 실시간 PC 만 행복아이 2017.11.01 253
18 test 행복아이 2015.10.12 224
17 test1 - 깔끔 행복아이 2019.06.21 187
16 test2 MP4 재생 행복아이 2019.06.21 191
15 test3 vjs.zencdn.net 행복아이 2019.06.21 312
14 video js 자막 옵션 행복아이 2014.09.11 750
13 video-js 게시판입니다. 행복아이 2014.09.05 279
12 videojs + flash mediaelement fallback 행복아이 2014.09.12 276
11 videojs +jw fallback 행복아이 2014.09.12 295
10 videojs 4.8.8 flash 지원(non-html5) rtmp 행복아이 2014.09.22 258
Board Pagination Prev 1 2 Next
/ 2