panolens 360 영상 재생 및 멈춤

하나의 360 동영상인데, 일정시간 재생되고 내가 설정한 지점에서 멈추고, 이때 poi가 화면에 나온다. poi 클릭 시 내가 원하는 부분으로 영상이 이동되어 재생되어야한다. (앞으로든 뒤로든)

1. 시행착오 끝 소스

웹에서 360동영상이 재생이 되고 내가 설정한 시간에 동영상이 멈춰야한다.

여러 시행착오 끝에 정리한 소스이다. (참고만 할 수 있게 정리)

videoTime1 : function() {
  this.video1_setTime = setTimeout("videoTime1()",1000);  // 1초후에 자기자신을 호출
  this.video1_time = (this.video1).videoElement.currentTime;

  if(this.f_플래그1 == 0 && this.video1_time > 44){
        this.video1.pauseVideo();
        this.poi1.show();
    }else if(this.f_플래그2 == 0 && this.video1_time > 88){
        this.video1.pauseVideo();
        this.poi2.show();
    }
    ~~  
     else{
        this.poi1.hide();
        this.poi2.hide();
    }
}

~~~

//poi 클릭이벤트 추가
var self = this;
this.v_poi1.addEventListener( 'click', function(){
    self.f_플래그1 = 1;    //플래그값 0이 아닌 다른값 넣기

    self.viewer.tweenControlCenter( new THREE.Vector3( 4832.06 , 414.29 , 1189.05), 0); //360화면위치 조정, 옵션 0 을 조정하면 큰숫자로 할 수록 부드럽게 바뀜.
    self.video1.setVideoCurrentTime({ percentage: 0.46 });  //비디오 시간을 46초부터 재생시키기 위해
    self.video1.playVideo();    //poi클릭하면 재생

});

~~~

위와 같이 하면, 1초마다 한번씩 videoTime1() 함수가 콜되어서 44초가 넘어가면 영상을 멈추고 poi를 나오게 했다.

개발을 하다가 문제가 있었다. 문제를 해결하면서 위 소스가 나온 과정을 짚어보자.

2. 문제

2-1. 나는 동영상이 11초에 멈추게 하고싶은데 정확히 11.0초에 안멈춘다!

1초에 한번씩 실행되니까 11초에 멈추겠지 했는데 정확히 11.0초에 멈추진 않았다. 동영상 여러개를 하나로 붙여서 하나의 동영상인데 11초~12초 사이에 다른 장면으로 전환한다.
그래서 다른장면으로 전환될때 poi클릭하고 바로 전환되는게 아니라 poi 클릭하고 다시 재생될때 전에 재생되던 영상 끝이 0.5초정도 짧게 나오고 다른장면으로 전환되는데 이게 거슬렸다.
setTimeout으로 1초마다 돌리지만 실제로 console 찍어보면 딱 1.0초마다 찍히진 않는다. 대략적으로 1.1초 정도? 그래서 4.9초에서 6.1초로 뛰어버리는 경우도 있다.
운나쁘게 그 사이에 걸려버리면 if문에 등호를 쓰게되면 안걸리기때문에 초를 부등호로 비교했다.

영상 전환될때 거슬리는 부분은 poi누르고 내가 재생하고 싶은 시간을 지정해줬다. 예를들면, 3초에 멈추고 poi를 누르면 이어서 재생이 아닌, 5초부터 영상을 재생시키는 것이다.

그래서 깔끔하게 해결!

2-2. 360영상에서 왕복해야하는데...왜 자꾸 멈추지?

이것이 내가 플래그 변수를 넣은 이유다.

 

videoTime1 함수에서 if문에 플래그 변수가 각각 들어가 있다.
3초~5초 재생하고 poi1 누르면 7~10초 재생하고 poi2누르면 다시 3~5초 재생하게끔 하고싶었다. 그런데 if 문에서 5초 보다 크면 pause 하니까 다음 7~10초 영상이 pause 되는 것이다.
2-1처럼 등호를 못쓰기때문에 부등호를 써야하는데.. 그러면 이런 pause가 발생하고... 그래서 각 구간별 플래그값을 선언했다. 0이면 if문에서 시간과 같이 비교해서 멈추게.
poi클릭시 재생이 안멈췄으면 하는 부분을 플래그값 1 로 변경하면 된다.

실제로 해보면 복잡하기때문에 구간을 그려서 변수값을 도식화 하는 것이 이해하기 쉬웠다. (c언어에서 포인터 배울때 손으로 구조 그려가면서 이해했는데.. 대학생기분 잠깐 느껴봄 ㅋㅋ)

 

예를 들면 이런식으로

3. 결론

위 소스는 편집해서 그렇고 동영상을 일일이 각 구간마다 시간재서 poi위치잡고 화면 위치 잡고.....

여러가지 노가다가 많아서 시간이 좀 걸렸고, 왕복 구간을 어떻게 구현할 건지 고민하고 삽질하고 다시 고민하고 삽질하고 그래서 시간이 더 걸렸다...ㅎㅎ

panolens로 360영상으로 뭔가 한다는게 자료도 많지않고 쉽지 않다 ㅠㅠ... 글엔 안나오지만 threejs webgl 까지 내려가서 이게 무슨 에러인지, 무슨 문제인지 찾는것도 너무 어렵다 ㅠㅠ

 

java, jsp로 개발하다가 panolens, threejs, webgl, 360이미지 및 동영상까지ㅋㅋㅋㅋㅋㅋㅋ