[Dev's] VideoJs 영상 플레이어 Reset하기

VIdeoJs를 사용할 때, 새로운 영상 resource 를 Load 해야하거나

부득이하게 플레이어의 option을 변경하여 refresh 해야하는 경우가 생긴다.

 

이 경우, 단순히 값만 변경하고 Load하면, 

"Player 'xxx' is Already Initialised. Options Will Not Be Applied"

이런 에러가 발생하고, 영상 플레이어에는 최초 Load한 영상만 나오게 된다.

 

이 경우, player를 dispose 하고, 다시 생성해야 한다.

var player = videojs(playerNm, videoJsOption, function onPlayerReady(){
.....
});

 

먼저, 보통 이렇게 player 을 초기화 하여 사용하는데

전역변수로 playerReset 을 하나 선언해준다.

var playerReset;
var foo = function () {
  var player = videojs(playerNm, videoJsOption, function onPlayerReady(){
  playerReset = this;
  .....
  });
}

 

그 다음 Player을 리셋 시켜주는 타이밍에, playerReset를 dispose() 한다.

		if (sources.length != 0) {
			sources = [];
			playerReset.dispose();
			$('.video_area').append("<video class='video-js vjs-default-skin vjs-big-play-centered' controls id='videoPlayer'></video>");
		}

위 소스같은 경우는 리소스를 load하는 코드 위에 선언하여

다시 리소스를 갱신해야 할 경우, 기존에 리소스가 있다면

sources를 초기화 하고, playerReset를 dispose 한다.

이때, video 태그 자체가 날아가기 때문에, div 아래에 video태그를 다시 재생성한다.