Video/Audio Element API

Element 공통 API

Element 공통 API 문서 내용을 참고하세요.

Media Element API

Media를 설정하고 제어할 수 있는 Video/Audio Element 관련 API 입니다.

  • api

    • pause (params: Object, callback: Function): void

      미디어를 일시 정지 합니다.

      • params: Object

      $self.api.pause();
$self.api.pause(null, callback);
$self.api.pause({}, callback);
function callback(){}

    • play (params: Object, callback: Function): void

      미디어를 재생 합니다.

      • params: Object

      $self.api.play();
$self.api.play(null, callback);
$self.api.play({}, callback);
function callback(){}

    • stop (params: Object, callback: Function): void

      미디어가 재생중이면 재생을 멈춤니다.

      • params: Object

      $self.api.stop();
$self.api.stop(null, callback);
$self.api.stop({}, callback);
function callback(){}

    • togglePlay (params: Object, callback: Function): void

      미디어 재생과 멈춤 (또는 일시정지)를 반복 합니다.

      • params: Object

        • toggleValue : String

          toggle 동작시 멈춤 동작을 할것인지 일시정지 할것인지를 설정.

          일시정지("pause"). 멈춤("stop")

      $self.api.togglePlay();
$self.api.togglePlay(null, callback);
$self.api.togglePlay({toggleValue: 'stop'}, callback);
function callback(){}

    • toggleFullScreen (params: Object, callback: Function): void

      Video를 Fullscreen 모드로 전환 합니다. (Only video)

      • params: Object

      $self.api.toggleFullScreen();
$self.api.toggleFullScreen(null, callback);
$self.api.toggleFullScreen({}, callback);
function callback(){}

    • autoplay (params: Object): Boolean

      자동재생 설정 여부를 설정하거나 설정값을 가져옵니다.

      • params: Object

        • value: Boolean

          자동 재생(true). 재생 대기(false)

      // Getter
var auto = $self.api.autoplay();

//Setter
$self.api.autoplay({value: true});
$self.api.autoplay(true);

    • controls (params: Object): Boolean

      컨트롤러 보이기 상태를 설정.

      • params: Object

        • value: Boolean | String

          설정(true), 해지(false), 토글("toggle")

      // Getter
var visible = $self.api.controls();

//Setter
$self.api.controls({value: true});
$self.api.controls({value: 'toggle'});
$self.api.controls('toggle');
$self.api.controls(false);

    • currentTime (params: Object): Number

      재생 위치(시간), second 단위.

      • params: Object

        • value: Number

          이동할 재생 시간(위치, second)

      // Getter
var time = $self.api.currentTime();

//Setter
$self.api.currentTime({value: 10});
$self.api.currentTime(10);
// 재생 위치를 10초로 이동됨

    • loop (params: Object): Boolean

      loop 재생을 설정.

      • params: Object

        • value: Boolean | String

          설정(true), 해지(false), 토글("toggle")

      // Getter
var visible = $self.api.loop();

//Setter
$self.api.loop({value: true});
$self.api.loop({value: 'toggle'});
$self.api.loop('toggle');
$self.api.loop(false);

    • muted (params: Object): Boolean

      묵음 상태를 설정.

      • params: Object

        • value: Boolean | String

          설정(true), 해지(false), 토글("toggle")

      // Getter
var isMuted = $self.api.muted();

//Setter
$self.api.muted({value: true});
$self.api.muted({value: 'toggle'});
$self.api.muted('toggle');
$self.api.muted(false);

    • src (params: Object): String

      미디어가 위치한 http 경로

      • params: Object

        • value: String

          미디어 경로 문자열

      // Getter
var src = $self.api.src();

//Setter
$self.api.src({value: 'http://미디어 경로'});
$self.api.src('http://미디어 경로');

    • volume (params: Object): Number

      소리 조절 (0~1)

      • params: Object

        • value: Number

          0 (최소)에서 1 (최대)사이의 값

      // Getter
var volume = $self.api.volume();

//Setter
$self.api.volume({value: 0.5});
$self.api.volume(0.5);

    • config (params, callback): void

      media 속성을 한꺼번에 설정 합니다.

      • params: Object

        • currentTime : Number 재생 위치(시간)

        • loop : Boolean | String loop 재생을 설정. 설정(true), 해지(false), 토글("toggle")

        • muted : Boolean | String 묵음 상태를 설정. 설정(true), 해지(false), 토글("toggle")

        • controls : Boolean | String 컨트롤러 보이기 상태를 설정. 설정(true), 해지(false), 토글("toggle")

        • src : String 미디어가 위치한 http 경로

        • volume : Number 소리 조절 (0~1)

        • autoplay : Boolean | String 자동재생 설정. 자동 재생(true), 재생 대기(false)

        • callback: Function params.src 설정이 있는 경우에만 재생 준비가 되었을때 호출됩니다. params.src 설정이 없는 경우 호출되지 않으므로 생략합니다.

      $self.config({
  src: 'http 경로',
  autoplay: true,
  controls: true,
  loop: false
}, callback);
function callback(){
  // params에 src 설정이 있는 경우에만 (재생 준비가 되었을때) 호출됩니다.
}

    • dispose (): void

      media 객체의 연결을 끊고 media player를 화면에서 완전히 제거합니다. (DOM에서도 삭제됨)

      $self.api.dispose();

    • duration (): Number

      (읽기 전용) media 소스가 연결되면 전체 재생 시간을 반환합니다. 재생이 불가능한 상황일때에는 0을 반환합니다.

      $self.api.src('http://미디어 경로');
$self.on('durationchange', function(){
  var runningTime = $self.api.duration();
});

    • formatTime (second: Number, guide: Number): String

      초(second) 단위의 숫자를 time 형식의 문자열로 변환해 줍니다. (예) 150 (초) ------> "0:02:30"

      • second: Number

        변환하려고 하는 시간(초)

      • guide: Number

        시간으로 변환할때 포맷을 알려줄 임의의 시간 (주로 duration).

        여기에 전달하는 값이 h:m:s 형식으로 나타나기에 충분히 큰 값이면 실제 변환될 second도 h:m:s 포맷으로 문자열이 구성됩니다.

      $self.api.formatTime(150); // "2:30"
$self.api.formatTime(1000);// "16:40"
$self.api.formatTime(150, 1000); // 02:30 (1000 값이 포맷을 결정함)

$self.api.formatTime(10000);// "2:46:40"
$self.api.formatTime(150, 10000); // "0:02:30" (시간까지 표기됨)

// 전체 재생시간을 전달하면 포맷을 자동으로 조정할수 있다.
var currentTime = $self.api.currentTime();
var duration = $self.api.duration();
$self.api.formatTime(currentTime, duration) + ' / ' + $self.api.formatTime(duration)
// "0:25:00 / 8:20:00" 형식으로 출력됨

    • parseTime (timeText: String): Number

      formatTime() API와 반대로 time 형식의 문자열을 초(second) 단위 숫자로 변환해 줍니다. (예) "0:02:30" ------> 150 (초)

      • timeText: String

        변환하려고 하는 time 형식의 문자열

      $self.api.formatTime("2:30"); // 150 (second)
$self.api.formatTime("16:40");// 1000 (second)
$self.api.formatTime("2:46:40");// 10000 (second)
PreviousWeb Element APINextYoutube Element API

Last updated