시작가이드

목차

  1. MediaCast css 및 스크립트 적용
  2. 플레이어 생성 및 초기화
  3. Setup Options
  4. 플레이어에 대한 참조 얻기
  5. 이벤트 콜백함수 사용

1. MediaCast css 및 스크립트 적용

[1] 제공한 스크립트에서 아래의 3가지를 include 합니다.

  • jquery : 저희 미디어캐스트 라이브러리는 jquery에 dependency합니다.

  • MediaCast.min.css : 미디어캐스트 플레이어 css 파일

  • MediaCast.min.js : 미디어캐스트 플레이어 스크립트 파일

  • [참고]이미 쓰는 jquery 가 있으면 이미 쓰고 있는 것으로 대체가능합니다.

Sample

<head>
<link rel="stylesheet" type="text/css" href="MediaCast.min.css">
<script type="text/javascript" src=" jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="MediaCast.min.js"></script>
</head>

[2] 플레이어를 적용할 요소를 body영역에 생성합니다.

Sample

<body>
...
<div class="video_container" id="player_div">
...
</body>

2. 플레이어 생성 및 초기화

setUp함수의 src 파라미터에 재생해야하는 미디어 소스 url을 설정하는 스크립트를 작성합니다.

Sample

$(document).ready(function(){
    MCVideo.setUp({'src': ‘http://xxx/xxx.mp4’ });
});

3. Setup Options

src 파라미터 외에 미디어, 기능, 너비, 자막, 스킨위치 등의 옵션들을 사용가능하며

다음과 같이 JSON 타입으로 파라미터에 적용됩니다.

더 많은 옵션들과 상세사항은 Player API Setup 섹션에 상세표를 제공하고 있습니다.

Sample

MCVideo.setUp(
{
    'skinServer': 'skin/skin.html',
    'scale': 'original',
    'src': 'http://test/sample.mp4',
    'userId': 'user-1234',
    'title': '샘플영상',
    'width': '100%',
    'height': '100%',
    'continuity': 'Y',
    'continuityAlert': 'Y',
    'lastPosition': 10,
    'notYetWatch': 'Y',
    'autoplay': 'N',
    "repeat": {
    "on": 'Y'
    }
}

4. 플레이어에 대한 참조 얻기

MCVideo 객체가 플레이어 대한 참조이며 이 인스턴스 객체를 통해서 기타 API 함수들을 적용가능합니다.

Sample

MCVideo.play(); // MCVideo 참조객체를 사용하여 play 함수 실행
MCVideo.getPosition(); // MCVideo 참조객체를 사용하여 재생위치조회 함수 실행

5. 이벤트 콜백함수 사용

MCVideo 객체에는 콜백함수를 인자로 받는 이벤트관련 함수가 4가지 존재합니다.

onLoaded, onEnded, onPlay, onPause

다음과 같은 형태로 사용하실수 있습니다.

Sample

<div id="player_div" class='video_container'>This text will be replaced with a player.</div>
<script>
MCVideo.setup({
    "src": "http://example.com/myVideo.mp4"
});

MCVideo.onLoaded(function(){
    alert('비디오가 로드되었습니다.');
});
</script>

results matching ""

    No results matching ""