조회 수 258 추천 수 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 중간에 버튼 행복아이 2014.09.24 1002
28 http streaming 코드 행복아이 2014.09.11 895
27 video js 자막 옵션 행복아이 2014.09.11 749
26 자동실행 행복아이 2019.06.21 705
25 hls 속도테스트 행복아이 2019.06.21 695
24 hls pc 및 모바일 행복아이 2019.06.21 662
23 knubs 96 행복아이 2019.06.21 505
22 HLS m3u8 ie 테스트 PC 및 모바일 모두 HTML5로 재생됨 행복아이 2019.06.20 481
21 knubs 행복아이 2019.06.21 450
20 HTML5 fullback flash (videojs + Flowplayer) 행복아이 2014.09.12 340
19 test3 vjs.zencdn.net 행복아이 2019.06.21 312
18 실시간방송 HLS 모바일용 file 행복아이 2015.07.31 303
17 videojs +jw fallback 행복아이 2014.09.12 295
16 videojs rtmp 행복아이 2014.09.12 282
15 video-js 게시판입니다. 행복아이 2014.09.05 279
14 videojs + flash mediaelement fallback 행복아이 2014.09.12 276
» videojs 4.8.8 flash 지원(non-html5) rtmp 행복아이 2014.09.22 258
12 rtmp 실시간 PC 만 행복아이 2017.11.01 253
11 오디오 js 행복아이 2014.09.24 245
10 영상 테스트 행복아이 2015.10.12 240
Board Pagination Prev 1 2 Next
/ 2