동영상 해상도 변경해도 이어서 보기

동영상 해상도 변경시 해상도에 따른 동영상파일이 물리적으로 따로있기때문에, setPanorama 할 때 처음부터 재생이 된다.

이때 전 해상도의 시간을 저장해서 현 해상도의 영상이 재생될 때, 저장된 시간부터 재생이 될 수 있도록 해야한다.

1. 시행착오

panolensJS를 직접 수정하지 않고, 내가 만든 js를 통해서 컨트롤 하려했다. 하지만 setPanorama 하고 전후로 currentTime을 줘도 제대로 작동이 안되었다.

그렇다고 setTimeout을 주자니 정확한 문제해결이 아니라 다시 원복.

setPanorama하고 모든 로직이 끝난 후 텍스처를 업데이트하기때문에 currentTime이 안먹는것 같았다.

panolensJS 자체에서 setPanorama 부분을 수정해야할 것 같다.

2. setPanoramaTime 새로 만들기

// setPanorama를 복붙해 만들었다. 넘어오는 변수에 per 추가
PANOLENS.Viewer.prototype.setPanoramaTime = function ( pano, per ) {

    var scope = this, leavingPanorama = this.panorama, camera = this.getCamera();

    if ( pano.type === 'panorama' && leavingPanorama !== pano ) {

        // Clear exisiting infospot
        this.hideInfospot();
        //this.scaleIn(1000, camera); //ddil 추가

        var afterEnterComplete = function () {

            leavingPanorama && leavingPanorama.onLeave(camera);
            pano.removeEventListener( 'enter-fade-start', afterEnterComplete );

            pano.setVideoCurrentTime({ percentage: per });  //파노라마 세팅 완성 후 currentTime 세팅해줌
        };

        pano.addEventListener( 'enter-fade-start', afterEnterComplete );
        // Assign and enter panorama
//            (this.panorama = pano).onEnter(camera);    //(텔레포트효과제거) camera 주석처리
        (this.panorama = pano).onEnter();

    }

};

어디가 제일 마지막에 끝날지 찾아보았다. 그 중 afterEnterComplete가 마지막으로 실행 되는 부분이었다.

기존에 setPanorama 함수는 여러군데에서 쓰고있으므로 안전하게 복붙해서 새로 함수를 만들었다. 이전화질 재생시간은 퍼센트/100 (0~1)로 넘겨주었다.

pano.setVideoCurrentTime({ percentage: per }); 이 부분을 새로 추가했다.

 

화질에 따라서 시간이 같이 진행된다.

3. 추가 이전화질의 재생시간

이전화질의 재생시간은 selectbox focus일때 변수에 재생시간을 저장했고, selectbox change할때 setPanoramaTime에 같이 넘겨줬다.

해상도마다 재생시간이 다르므로 동영상 재생시 각 해상도 재생시간중 제일 큰것을 골라 계산 후 넘겨주었다. (비티오 컨트롤 버튼, seekbar를 없앤상태라 가능했다. 만약 이 컨트롤들이 다 있다면 다른 로직을 생각해야 할 것이다.)

넘겨줄때 0~1사이의 숫자가 넘어가야하므로 (현재까지 재생된시간/전체시간) 이 값을 넘겨주었다.