티스토리 뷰

실무 이슈

jwplayer 버전 이슈(3) - onSeek, on('seek')

알 수 없는 사용자 2021. 8. 8. 17:37

0. 시작

이슈리스트 1. pip 예시에서 본 것과 같이 여러 브라우저에서 jwplayer의 onSeek가 작동하지 않는 몇몇 케이스가 존재한다. 내가 발견한 케이스는 모두 5개로 아래 리스트와 같다.

seek 이벤트 이슈

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

1. 원인파악

위 이슈들의 공통점으로 브라우저 상에서 발생하는 문제가 아닌 브라우저 이외의 프로세스나 하드웨어 자체에서 발생하는 이슈란 걸 알 수 있다.
그렇기 떄문에, 나는 처음에 웹 밖에서 일어나는 문제에서 발생하니깐 개발자가 어떻게 할 수 없는 영역의(?) 문제이지 않을까 생각했다.
이를 확인하기 위한 방법으로 jwplayer에서 제공하는 onSeek 이벤트가 아닌 자바스크립트 자체 API - seeking, 자바스크립트 자체 API - seeked에서 제공하는 이벤트를 통해 테스트하였고, 이 떄는 정상적으로 동작함을 확인했다.

const video = document.querySelector('video');

video.addEventListener('seeked', (event) => {
  console.log('Video found the playback position it was looking for.');
});

이는 곧, jwplayer에서 제공하는 onSeek의 문제임을 확인할 수 있었고, 그럼 이 문제를 어떻게 해결할 수 있을지 찾기 시작했다.

2. 해결

jwplayer 공식문서를 뒤지기 시작했고, 여기서 관련된 내용을 볼 수 있었다.
(https://support.jwplayer.com/articles/jw7-to-jw8-migration-reference)

위 글에서 볼 수 있듯이 jwplayer 7부터는 onSeek 이벤트가 deprecated 되었고, on('seek') 형태의 이벤트로 바뀌었다는 것이다.
deprecated된 이유는 정확히 나와있지 않지만 onSeek 이벤트에 문제가 있고, 그렇기 떄문에 on('seek') 이벤트로 대체된 것이구나 생각했다.

하여튼, 내가 사용했던 jwplayer는 6버전으로 7버전과 비교하여 테스트를 시작했다.

<html>
    <script type="text/javascript" src="jwplayer.js"></script>
    <body>
        <div id="video"></div>
    </body>
    <script>
        jwplayer('video').setup({
            file: "16_04.mp4"
        });

        // (1) jwplayer 6
        jwplayer('video').onSeek(function(){
            console.log('onSeek');
        })
        // (2) jwplayer 7 이상
        jwplayer('video').on('seek', function() {
            console.log('onSeek')
        })
    </script>
</html>

정말 간단하게 로컬에 영상을 넣어서 이벤트가 정상적으로 동작하는지 테스트하였고, jwplayer는 총 3가지 버전으로 테스트하였다.

  1. 6.12.4956 version
    -> onSeek 이벤트만 존재하는 버전으로 위 이슈들이 나타난다.
  2. 7.12.0 version
    -> onSeek, on('seek') 이벤트가 둘 다 존재하나 두개의 이벤트에서 모두 같은 증상이 나타난다.
  3. 7.12.13 version
    -> onSeek, on('seek') 이벤트가 둘 다 존재하고, 두개 이벤트 모두 위 이슈사항들이 나타나지 않는다.

예측이 절반만 맞은 테스트 결과이다. 7버전 이후부터는 on('seek') 이벤트가 별도로 존재했지만, 3번 버전에서만 이슈들이 해결되었다.
jwplayer의 릴리즈 노트를 살펴보았지만, 내용도 너무 많고 대충 살펴보아도 관련한 내용이 보이지 않아 뚜렷한 원인은 찾지 못했다.

아무튼 해결법은 찾았고, jwplayer 6 버전을 사용하는 시스템에서 위 문제를 해결하기 위에서는 jwplayer 7으로 변경하면 문제는 해결될 것으로 보인다.
다만, onSeek의 이벤트만 살펴보았기 떄문에, 소스의 수정없이 버전만 올려서 정상적으로 시스템이 동작하는지 전체적인 검수는 꼭 필요해 보인다.

3. 참고사항

  • 앞서 해결에서 살펴본 테스트에서의 jwplayer 파일은 공식홈페이지에서는 이미 예전 버전은 제공하지 않기 떄문에, 인터넷에서 떠도는 파일로 테스트한 것이다. 그렇기 떄문애, 버전별 테스트가 부정확 할 수도 있다는 점을 참고해야 한다.

  • firefox pip 동작원리

저작자표시 비영리 변경금지

'실무 이슈' 카테고리의 다른 글

클라이언트에서 html 태그 속성 조작  (0) 2021.08.22
HTMLMediaElement.playbackRate 조작이슈  (0) 2021.08.16
jwplayer 버전 이슈(2) - playsinline  (0) 2021.08.01
jwplayer 버전 이슈(1) - 시작  (31) 2021.08.01
크롬 beforeunload 이벤트 dialog message  (0) 2020.05.17
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함