조회 수 259 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

videojs 확정.

버전업이 4.8.8로 되어서

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


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


 <link href="/videojs/video-js.css" rel="stylesheet" type="text/css" />
 

<!-- video.js must be in the <head> for older IEs to work. -->

<script src="/videojs/video.js"></script>


  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
  <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="" poster="/mov/navi.png" data-setup="{}">
<source src="rtmp://issac.codisk.com/mov/&mp4:2014/20140808GC/20140808GC_FunTime_Full.mp4" type="rtmp/mp4">
<source src="http://issac.codisk.com/mov/2014/20140808GC/20140808GC_FunTime_Full.mp4" type="video/mp4">
  </video>



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로 스트리밍 하게되는것이다.



List of Articles
번호 제목 글쓴이 날짜 조회 수
29 video-js 게시판입니다. 행복아이 2014.09.05 279
28 http streaming 코드 행복아이 2014.09.11 895
27 video js 자막 옵션 행복아이 2014.09.11 758
26 HTML5 fullback flash (videojs + Flowplayer) 행복아이 2014.09.12 341
25 videojs +jw fallback 행복아이 2014.09.12 295
24 videojs rtmp 행복아이 2014.09.12 282
23 videojs + flash mediaelement fallback 행복아이 2014.09.12 276
» videojs 4.8.8 flash 지원(non-html5) rtmp 행복아이 2014.09.22 259
21 중간에 버튼 행복아이 2014.09.24 1002
20 XE에서 HTML5 애드온 작동시 행복아이 2014.09.24 220
19 멀티미디어 컴포넌트로 삽입 행복아이 2014.09.24 206
18 오디오 삽입 audiio-js 행복아이 2014.09.24 186
17 오디오 js 행복아이 2014.09.24 245
16 mp3 멀티미디어 행복아이 2014.09.25 234
15 실시간방송 HLS 모바일용 file 행복아이 2015.07.31 303
14 영상 테스트 행복아이 2015.10.12 240
13 test 행복아이 2015.10.12 224
12 rtmp 실시간 PC 만 행복아이 2017.11.01 253
11 hls 실시간 테스트 행복아이 2019.06.14 208
10 http mp4 video 행복아이 2019.06.14 208
Board Pagination Prev 1 2 Next
/ 2