[Android] Exoplayer with Seekbar example in VR Player / VR에서 ExoPlayer 영상 재생 시간 SeekBar로 컨트롤

ControlPanel을 통해 VR Player를 컨트롤 하는 기능을 구현하고 있다.

이제 VR Player로 재생되고 있는 미디어 영상과 VR Player 위에 Exo Player를 통해 띄운 영상의 시간을

XML로 만든 Control Panel 하단의 Seekbar를 이용하여 동시에 컨트롤 할 수 있도록 하는 것이 목표이다.

 

유튜브나 넷플릭스 등 기존 2D 영상은 하단의 Progress bar를 통해 Video 시간을 조정할 수 있다.

그러나 HMD에 들어가 있는 핸드폰으로 VR 영상을 시청하고 있을 때는 직접적인 손가락 터치로 제어를 하는 것은 매우 불편하기 때문에 

물리적인 터치가 아닌 하단의 Seekbar를 탭함으로써 영상의 시간을 조절하도록 한다.

 

 

VR 영상의 화면은 360도로 굴곡진 화면이기 때문에 사용자가 직접적으로 보고있는 화면의 직관적인 위치와 SeekBar의 Progress영역의 길이를 연결시키기 어려웠다.

때문에 onNewFrame()이 호출될 때마다 업데이트 되는 현재 보고 있는 방향에 대한 viewDirection의 yaw각도를 구해 progress 길이를 대신해서 사용하기로 결정하였다.

@Override
public void onNewFrame(float[] forward, float[] viewDirection) {
    ...
    currentYaw = viewDirection[yaw];
}

 

 

 

 

 

Control Panel의 정가운데가 yaw값이 0인 지점이며,

Player의 영상 전체 시간(00:30)이 기록된 오른쪽 방향으로 갈수록 작아지고

현재 영상 재생 시간(00:19)을 표시하는 왼쪽 방향으로 갈수록 커진다.

⃝으로 표시된 지점이 현새 사용자가 보고 있는 곳이며, Progress내에서 원하는 지점에서 HMD를 탭하면 다음 메소드를 호출한다.

private final static float PLAY_BAR_START_YAW = 10f; // start yaw: left side from O(0,0)
private final static float PLAY_BAR_END_YAW = -10f; // end yaw: right side from O(0,0)

private float getPlayBarTabPositionRatio() {
    return (PLAY_BAR_START_YAW - currentYaw) / (PLAY_BAR_START_YAW - PLAY_BAR_END_YAW);
}

 ratio는 현재보고있는 지점의 yaw값 / 전체 yaw값이다.

PLAY_BAR_START_YAW - PLAY_BAR_END_YAW

= Math.abs(PLAY_BAR_START_YAW) + Math.abs(PLAY_BAR_END_YAW)

이 메소드를 통해 progress내에서 현재 탭한 지점의 비율을 얻어  다음 메소드에 넘겨준다.

private void seekByTap(float ratio) {
    long timeMs = (long) (vrPlayer.getDurationMs() * ratio);
    vrPlayer.seek(timeMs);
    exoPlayer.seek(timeMs);
}

 

 

---> 이를 통해 SeekBar를 이용하여 두개의 영상의 시간을 컨트롤하는 것이 가능하다.