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