HTML5 Flash Fallback (Ie8이하, RTMP) 코드

by 행복아이 posted Sep 12, 2014
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

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

<script src="/mediae/jquery.js"></script>
<script src="/mediae/mediaelement-and-player.min.js"></script>
<link href="/mediae/mediaelementplayer.css" rel="stylesheet" />

<link href="/mediae/mejs-skins.css" rel="stylesheet" />


<video class="mejs-ted" width="720" height="406" preload="auto" controls="controls">
    <source src="http영상주소.mp4" type="video/mp4">
   <track kind="subtitles" src="자막주소.srt" srclang="ko" label="korean"></track>
<object width="720" height="406" data="/mediae/flashmediaelement.swf" type="application/x-shockwave-flash"><param name="allowscriptaccess" value="never" />
       <param name="movie" value="/mediae/flashmediaelement.swf" />
       <param name="flashvars" value="controls=true&amp;file=rtmp혹은 http주소.mp4" />
</object>
</video>


preload="auto"  이부분을 none라고 주니 모바일 오페라에서 재생을 못해준다.

따라서 auto라고 주는게 맞다.



<script>
$('audio,video').mediaelementplayer({
 success: function(player, node) {
  $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
 }
});

</script>


스킨을 사용시 위 파란부분을 주어야한다. 안주면 기본값으로 나옴. 맨아래 스크립트 부분도 주어야 자막CC가 제대로 보여진다.

자막 srt는 ansi가 아니라 unicode나 utf-8등으로 해줘야 한글은 보일것임.


IE8에서는 드래그는 되지않는 스트리밍만 되도록 위해서는 파란부분을 넣으면 안된다.

파란부분을 넣으면 rtmp를 소화하지 못하고 http구문에 있는 것을 다운로딩해서 플레이해버린다.

파란부분을 넣지 않으면 자막이 또한 제대로 나오지 않는다...

그리고 RMTP부분에서

rtmp://주소/애플리케이션/mp4:서브폴더/mp4파일명 형식으로 주어야한다.


자막은 기본으로 none이다. 그래서 기본값으로 한글자막이나 영자막등을 주려면 아래와 같이 스크립트를 추가한다.

그런데 기본값으로 안되는듯...


<script>
$('audio,video').mediaelementplayer({
 // auto-select this language (instead of starting with "None")
 startLanguage:'en',
 // automatically translate into these languages
 translations:['es','ar','zh','ru'],
 // enable the dropdown list of languages
 translationSelector: true
});
</script>