HTML5 fullback flash (videojs + Flowplayer)

by 행복아이 posted Sep 12, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

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이하)