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



  1. video-js 게시판입니다.

    Date2014.09.05 By행복아이 Views279
    Read More
  2. http streaming 코드

    Date2014.09.11 By행복아이 Views895
    Read More
  3. video js 자막 옵션

    Date2014.09.11 By행복아이 Views760
    Read More
  4. HTML5 fullback flash (videojs + Flowplayer)

    Date2014.09.12 By행복아이 Views341
    Read More
  5. videojs +jw fallback

    Date2014.09.12 By행복아이 Views295
    Read More
  6. videojs rtmp

    Date2014.09.12 By행복아이 Views282
    Read More
  7. videojs + flash mediaelement fallback

    Date2014.09.12 By행복아이 Views276
    Read More
  8. videojs 4.8.8 flash 지원(non-html5) rtmp

    Date2014.09.22 By행복아이 Views259
    Read More
  9. 중간에 버튼

    Date2014.09.24 By행복아이 Views1002
    Read More
  10. XE에서 HTML5 애드온 작동시

    Date2014.09.24 By행복아이 Views220
    Read More
  11. 멀티미디어 컴포넌트로 삽입

    Date2014.09.24 By행복아이 Views206
    Read More
  12. 오디오 삽입 audiio-js

    Date2014.09.24 By행복아이 Views186
    Read More
  13. 오디오 js

    Date2014.09.24 By행복아이 Views245
    Read More
  14. mp3 멀티미디어

    Date2014.09.25 By행복아이 Views234
    Read More
  15. 실시간방송 HLS 모바일용

    Date2015.07.31 By행복아이 Views303
    Read More
  16. 영상 테스트

    Date2015.10.12 By행복아이 Views240
    Read More
  17. test

    Date2015.10.12 By행복아이 Views224
    Read More
  18. rtmp 실시간 PC 만

    Date2017.11.01 By행복아이 Views253
    Read More
  19. hls 실시간 테스트

    Date2019.06.14 By행복아이 Views208
    Read More
  20. http mp4 video

    Date2019.06.14 By행복아이 Views208
    Read More
Board Pagination Prev 1 2 Next
/ 2