jwplayer 버전 이슈(1) - 시작

jwplayer 이슈 발생

---

웹에서 video를 제어하기 위해 주로 jwplayer를 많이 사용한다.
내가 업무에서 겪었던 jwplayer의 문제점과 원인 해결방안에 대해서 남기려고 한다.

이슈리스트

1. firefox에서 기본으로 제공하는 pip기능에서 onSeek이벤트 미작동
2. ios 모바일 safari web에서 video가 사파리 전용 플레이어로 실행됨과 동시에 onSeek이벤트 미작동
3. 클라이언트 브라우저 관리자모드에서 controls속성 추가시 onSeek이벤트 미작동
4. 맥북, safari에서 맥북에서 지원하는 터치바에서 동영상 이동시 onSeek이벤트 미작동
5. 크롬 확장프로그램으로 비디오 조절기능을 사용시 배속 및 동영상 컨트롤바 제어 불가능
6. HTMLMediaElement.playbackRate 클라이언트 조작

0. 시작

---

교육관련 회사에서 근무하면서 학습자가 어디까지 들었고, 처음부터 끝까지 듣도록 제어하는 업무가 메인 업무이기 떄문에,
실제로 클라이언트가 의도적으로 코드를 조작하거나 브라우저에 따른 시스템 문제에 대해 관심이 많았다.

개발자로 일하기 시작한지 대략 1년 쯤 되었을 떄,
코로나가 터지면서 예비군을 온라인 교육으로 대체하게 되어 들어야 했었는데 너무 귀찮은거다.
그래서, '코드를 조작해서 다들은 것처럼 조작할 수 있지 않을까?' 라는 생각에 클라이언트 조작해보았고, 결국 성공하였다.
(방법은 문제가 될 수 있으니 말하지 않곘다. 이 언급자체가 문제가 될 수도 있겠지만..?)

그러다보니 여러방면으로 회사 시스템에 문제점을 찾게 되었고, 그 결과 많은 문제가 있었던 것으로 알았다.

1. 이슈발생

---

어느 순간부터 사파리 학습자에 대한 컴플레인이 심해지면서 회사 자체적으로도 기타 브라우저에 대한 이슈도 확인되었다.
뒤에서 하나씩 다루겠지만, 공통점은 비디오를 제어하는 컨트롤바 이벤트가 정상적으로 동작하지 않는다는 것이었고,
근본적인 원인은 회사에서 사용하고 있는 jwplayer의 버전이 너무 낮아 발생하는 문제인 것으로 파악되었다.

시스템 자체가 5년정도 되었고, 그 사이에 사파리나 파이어폭스 등 여러가지 브라우저 사용자가 많아지면서
그에 맞게 준비하지 못했고, jwplayer 버전관리를 하지않아 여러가지 이슈를 야기하게 된 것이다.

2. 원인파악

---

이슈리스트 1번을 예로 들겠다.
아직 영상을 보지 않는 부분으로 학습자가 임의로 넘길 수 없게 onSeek 이벤트를 이용해 컨트롤바를 앞으로 땡기면 다시 마지막 위치로 돌아가게 하는 기능에 문제가 발견되었다.
처음에는 회사 내부 소스의 문제나 브라우저 자체의 버그이슈가 아닌가 의심을 했다.
정확한 원인 파악이 힘들어 카프카를 통해 학습자와 완전 같은 환경에서 테스트를 하기 시작했지만 알 수 없었고,
그러던 중 파이어폭스로 비디오 재생시 이상한 버튼이 뜨는걸 발견했다.

파이어폭스에서 이런 기능을 제공한다고 생각도 못했고, 해당 버튼을 누르면 아래 같이 pip모드로 영상이 재생되었던 것이다.

너무나 황당(?)했고, pip모드에서 화살표 클릭시 영상이 10초 뒤로 넘어가고 있던 것이었다.
이러하게 회사에서 사용하고 있는 jwplayer의 onSeek이벤트가 정상적으로 동작하지 않는 케이스가 있었다.
하지만 여기서도 원인을 정확히 파악할 수 없었는데, 케이스가 세가지로 나뉘었기 때문이다.

1. 사용자가 비교적 적고, 기존 브라우저에는 없는 기능이니 브라우저 자체의 이슈인지
2. 회사 내부에서 사용하고 있는 jwplayer 자체의 문제인지
3. jwplayer자체 버전이 오래되었기 떄문에, 버전의 문제인지

세가지 정도로 원인을 추린 후에 명확하게 하기 위해 3 -> 2 -> 1 순으로 좁혀나가기로 했다.
왜냐하면 1,2의 경우 확인하기에 너무 추상적(?)이라 생각했고, 정확한 리포트가 있지 않는 이상 확신할 수 없다 생각했다.

3. 해결

---

jwplayer 자체에서 버전별로 가이드가 따로 제공되는 것이 없는 것 같아 확인이 매우 힘들었다.
아직 소스를 수정하여 실제 학습서버에서 확인해본 사항은 아니지만 테스트 코드를 만들어 확인한 결과 위 1~5번 이슈 모두
jwplayer 버전의 문제로 확인되었다. 테스트 코드는 케이스별로 뒤에서 다루며 확인할 것이다.
또한, 버전 업그레이드 / 외부소스가 아닌 나의 회사 에플리케이션 코드 안에서 해결할 수 없는지에 대해 말할 것이다.

4. 생각

---

내가 이 이슈들을 해결하면서 가장 느낀건 버전관리의 중요성을 뼈저리게 느꼈다.
보통 한번 개발하고 특별한 이슈가 있지 않는 이상 버전에 대해서 올려야할 필요성을 느끼지 못했었다.(스프링같은 주요 프레임워크 말고...)
근데 이렇게 부수적으로 사용하고 있는 라이브러리도 시스템에 내장하여 사용하고 있는 경우 시간이 자나 브라우저 환경이 바뀜에 따라 심각한 이슈를 야기할 수 있다는 걸 배웠고, 버전관리에 중요성을 다시 한번 생각하게 되었다.