조회 수 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
번호 제목 글쓴이 날짜 조회 수
9 중간에 버튼 행복아이 2014.09.24 1002
8 videojs 4.8.8 flash 지원(non-html5) rtmp 행복아이 2014.09.22 258
7 videojs + flash mediaelement fallback 행복아이 2014.09.12 276
6 videojs rtmp 행복아이 2014.09.12 282
5 videojs +jw fallback 행복아이 2014.09.12 295
» HTML5 fullback flash (videojs + Flowplayer) 행복아이 2014.09.12 340
3 video js 자막 옵션 행복아이 2014.09.11 748
2 http streaming 코드 행복아이 2014.09.11 895
1 video-js 게시판입니다. 행복아이 2014.09.05 279
Board Pagination Prev 1 2 Next
/ 2