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