끄적끄적

0. 시작 앞에서 살펴본 jwplayer 이슈 중에 video태그에 controls를 클라이언트가 적접 조작하여 커스텀된 컨트롤바가 아닌 기본 컨트롤바를 띄울 수 있다. 이럴 때 어떤 사이드 이슈가 발생할지 예상할 수 없기 떄문에, 어떻게 대처할지 생각해보았다. 1. 분석 아래 사진은 넷플릭스 인터렉티브 비디오 "블랙미러 : 밴더너내치"에서 조작한 사진이다. video태그를 찾아 controls 속성을 강제로 넣으면 빨간색 부분처럼 기본으로 제공되는 컨트롤바가 별개로 뜨면서 영상의 길이와 같은 정보가 노출된다. 평상시에는 중요하지 않은 이슈이기만 저렇게 인터렉티브 비디오일 경우 클라이언트에서 조작하여 원하는 영상 위치로 이동시킬 수 있지 않나싶다. 저런 기본 컨트롤바를 꼭 막아야하는 경우 어떻게 해야할까..

0. 시작 이전까지는 jwplayer 버전에 따른 원인 분석과 해결방법을 알아보았다면, 이제는 jwplayer 버전은 유지하고, 추가 소스코드로만 해결할 수 있는 방법에 대한 생각을 정리할 것이다. 배속 이벤트 이슈 크롬 확장프로그램으로 비디오 조절기능을 사용시 배속 임의 조작 HTMLMediaElement.playbackRate 클라이언트(브라우저 관리자 도구) 조작 1. 원인 구글링을 하던 도중 관리자도구에서 비디오의 속성값을 임의로 변경하여 클라이언트가 배속을 임의로 설정하는 경우를 발견하였다. document.getElementById("video").querySelector("video").playbackRate = 10이 외에도 크롬 확장프로그램에서 배속을 바꿀시 소스에 걸린 이벤트가 정상적으..

0. 시작 이슈리스트 1. pip 예시에서 본 것과 같이 여러 브라우저에서 jwplayer의 onSeek가 작동하지 않는 몇몇 케이스가 존재한다. 내가 발견한 케이스는 모두 5개로 아래 리스트와 같다. seek 이벤트 이슈 firefox에서 기본으로 제공하는 pip기능에서 onSeek이벤트 미작동 ios 모바일 safari web에서 video가 사파리 전용 플레이어로 실행됨과 동시에 onSeek이벤트 미작동 클라이언트 브라우저 관리자모드에서 controls속성 추가시 onSeek이벤트 미작동 맥북, safari에서 맥북에서 지원하는 터치바에서 동영상 이동시 onSeek이벤트 미작동 크롬 확장프로그램으로 비디오 조절기능을 사용시 동영상 컨트롤바 제어 불가능 1. 원인파악 위 이슈들의 공통점으로 브라우저 ..

ios 모바일 웹 사파리에서 비디오 재생시 사파리 전용 플레이어로 재생됨. 0. 시작 ios 모바일 웹 사파리에서 비디오를 재생시키면 사파리 전용플레이어로 재생되는 현상이 발생하였다. 사파리 전용 플레이어로 재생되면서 onSeek 이벤트가 작동하지 않는 문제도 있지만, 이 글에서는 모바일 웹에서 브라우저 전용 플레이어로 뜨는 조건에 대해서 적어보려한다. 1. 원인파악 video 태그의 attribute를 찾아보면 ios 사파리의 플레이어의 사용여부(?) 설정은 playsinline으로 된다는 것을 알 수 있다. 그럼 jwplayer를 사용했을 때, playsinline 속성이 어떻게 들어가는지 확인해보자. jwplayer 6버전으로 테스트한 결과이다. playsinline속성이 들어가긴 하는데, webk..

jwplayer 이슈 발생 웹에서 video를 제어하기 위해 주로 jwplayer를 많이 사용한다. 내가 업무에서 겪었던 jwplayer의 문제점과 원인 해결방안에 대해서 남기려고 한다. 이슈리스트 firefox에서 기본으로 제공하는 pip기능에서 onSeek이벤트 미작동 ios 모바일 safari web에서 video가 사파리 전용 플레이어로 실행됨과 동시에 onSeek이벤트 미작동 클라이언트 브라우저 관리자모드에서 controls속성 추가시 onSeek이벤트 미작동 맥북, safari에서 맥북에서 지원하는 터치바에서 동영상 이동시 onSeek이벤트 미작동 크롬 확장프로그램으로 비디오 조절기능을 사용시 배속 및 동영상 컨트롤바 제어 불가능 HTMLMediaElement.playbackRate 클라이언트..

이전에 beforeunload 시에 동기적인 ajax콜을 사용할 수 없었던 것에 이에서 추가적으로 알게된 크롬의 정책을 남겨보려한다. 웹에서 학습을 진행할 때 최소한 몇 분을 들어야 학습이 완료되는지 브라우저를 종료할 때, 알럿을 띄워주는 기능이 있었다. 하지만, 언젠가부터 ie에서는 동작하지만 크롬에서는 동작하지 않는다는 운영자의 말을 듣고 원인을 파악해나가기 시작했다. beforeunload test 위는 실무에서 사용하던 방식을 예시로 가져왔다. 위와 같은 방식이 ie에서는 잘 동작하지만, 크롬에서는 동작하지 않는 것이다. 구글링을 통해 찾아보니 이상한 점을 발견했다. 위와 같은 방식에서 크롬에서는 종료시에 confirm dialog가 출력되기는 하나 문구가 아래와 같은 dialog가 나와야하지만,..