video-js - videojs 4.8.8 flash 지원(non-html5) rtmp

videojs 확정.

버전업이 4.8.8로 되어서

non-html5 브라우저에서는 flash로 동작.

IE9 ~모바일브라우저는 html5로 동작, ie8은 flash로 동작으로 보면 되겠다.

<script>
videojs.options.flash.swf = "/videojs/video-js.swf"
</script>

1. XE에서 IE에서 게시물 수정시 src 부분을 무조건 http로 바꿔버린다.

소스로 rtmp로 넣고 등록후 , 다시 게시물 수정을 누르면

<source src="http://내도메인rtmp://issac.codisk~~~

이렇게 앞에 붙어버린다. 웃긴게..

단독 HTML로 사용하면 수정권한이 없으니 아무 문제없는데 이렇게 xE에서 삽입할 경우는 반드시 수정을 할경우에

이렇게 붙여지는 부분을 다시 없애줘야하는 불편함이 있다.

SRC 태그에 대해서 기본값으로 http 를 붙이게 한 구조인것 같다.

2. RTMP소스부분

<source src="rtmp://issac.codisk.com/mov/&mp4:2014/20140808GC/20140808GC_FunTime_Full.mp4" type="rtmp/mp4">

RTMP소스 부분에서 UlrealMediaServer로 구동하는 rTMP의 경우 주소가 /vod/애플리케이션네임/서버디렉토리/파일 순서인데

nginx로 구동하는 rtmp의 주소는 위와 같이 /애플리케이션네임/&mp4:서브디렉토리/파일명 순서로 해주어야재생이된다.

3. video태그부분

preload="none" 이 아니라 "auto"로 주어야 모바일 오페라에서 블랙스크린이 되지 않는다.

class 에 vjs-big-play-centered 를 주면 플레이버튼이 좌측상단이 아니라 가운데 나타나게 된다. 보고 싶은대로 사용.

poster="/mov/navi.png" 미리보여줄 이미지가 있을경우 사용. 그렇지 않으면 없앤다.

IE8을 위해서 flash기반으로 rtmp소스구동

HTML5를 지원하는 브라우저 및 모바일에서는 http소스를 구동

간략히 코드는 아래와 같이.

<link href="/videojs/video-js.css" rel="stylesheet" type="text/css" />
<script src="/videojs/video.js"></script>
<script>
videojs.options.flash.swf = "/videojs/video-js.swf"
</script>

<video width="720" height="406" class="video-js vjs-default-skin vjs-big-play-centered" id="example_video_1" preload="auto" controls="" data-setup="{}">
<source src="rtmp://issac.codisk.com/mov/&mp4:2014/20140808GC/20140808GC_FunTime_Full.mp4" type="rtmp/mp4">
<source src="http://one2.kr/mp4/mov/nut720.mp4" type="video/mp4">
  </video>

위와 같이 소스를 달리해서 보여준다면

일반 브라우저및 모바일에서는 nut720.mp4를 http로 스트리밍할것이고

플래시만 돌아가는 IE8에서는 20140808GC_FunTime_Full.mp4를 rtmp로 스트리밍 하게되는것이다.

videojs 4.8.8 flash 지원(non-html5) rtmp

단축키

Articles