DashJs에서는 다양한 이벤트들이 있으며 이에 대해 리스너를 등록하거나 제거할 수 있음.
on(type, listener, scope, options) 를 통해서 등록하거나
off(type, listener, scope) 를 통해서 제거할 수 있다.
type은 DashJs에서 제공하는 MediaPlyerEvents 종류로 제공하는 상수를 넣으면 해당 이벤트가 발생할 때 동작이 된다.
https://cdn.dashjs.org/latest/jsdoc/MediaPlayerEvents.html
dash.js Class: MediaPlayerEvents
Triggered when the video element's buffer state changes to stalled. Check mediaType in payload to determine type (Video, Audio, FragmentedText).
cdn.dashjs.org
https://cdn.dashjs.org/latest/jsdoc/streaming_MediaPlayerEvents.js.html
dash.js Source: streaming/MediaPlayerEvents.js
cdn.dashjs.org
여기에서 확인이 가능하다.
간단하게 주로 사용할 것들만 살펴보면
ERROR : 엘리먼트 또는 MSE 소스 버퍼에서 에러가 발생시 호출
PLAYBACK_ENDED : playback 완료시 호출
PLAYBACK_ERROR : playback 중 에러 발생시 호출
PLAYBACK_PLAYING : 재생할때 호출
PLAYBACK_PAUSED : 일시정지시 호출
직접 테스트 해보자
간단하게 재생/일시정지만 등록하여 테스트 해보았다
<html>
<head>
<title>Test_Player</title>
<script type="text/javascript" src="./lib/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./lib/hls.js"></script>
<script type="text/javascript" src="./lib/dash.all.min.js"></script>
<script type="text/javascript">
var url = "https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd";
var player;
function init(){
var element = document.getElementById("player");
player = dashjs.MediaPlayer().create();
player.initialize();
player.setAutoPlay(false);
player.attachView(element);
player.attachSource(url);
player.on(dashjs.MediaPlayer.events.PLAYBACK_PLAYING, function(){
console.log("called PLAYING");
});
player.on(dashjs.MediaPlayer.events.PLAYBACK_PAUSED, function(){
console.log("called PAUSE");
});
}
function play(){
player.play();
}
function pause(){
player.pause();
}
</script>
</head>
<body>
<button id="init" onclick='init()'>init</button>
<button id="play" onclick='play()'>play</button>
<button id="pause" onclick='pause()'>pause</button>
<video id="player">
</video>
</body>
http://reference.dashif.org/dash.js/latest/samples/getting-started/listening-to-events.html
Listening to events example
Listening to events Example showing how to listen to events raised by dash.js. This sample allows you to explore the various external events that are accessible from MediaPlayer. Events can be dynamically added and removed. Choose the events you would like
reference.dashif.org
여기서 직접 테스트도 가능하다
'개발 > javascript' 카테고리의 다른 글
| DashJs 초기화 및 영상 실행 (0) | 2022.10.06 |
|---|---|
| DashJs 테스트 (1) | 2022.10.05 |
