모바일 웹) 사파리 video 재생 안됨 이슈

|삽질 기록

 

모바일 웹에서 동영상 스트리밍 기능을 테스트 하던 중 아이폰에서 영상의 video가 재생이 되지 않는 문제를 발견했다.

처음에는 뭐가 문제인지 아예 감을 못잡아서 디버깅 해보려고 맥북에서 부트캠프로 맥과 윈도우를 왔다 갔다 하다가 피시가 아예 터져버렸다..😢

그 뒤로는 무한 복구 모드..

결국 다행히 오늘치의 작업분은 백업을 해둬서  큰 맘먹고 윈도우를 아예 초기화를 하고 디버깅 환경을 내 피시말고 다른 맥북에 세팅했다.

 

하지만 결국 별다른 문제를 찾지 못하며 이틀째 삽질하다가 원인을 찾아냈다.

 

 

|해결방법 및 원인

if(videoSrc != '') {
    	if (video.canPlayType('application/vnd.apple.mpegurl')) {
    		video.src = videoSrc;
    		$('#video').attr('playsinline','');	//이거추가

    	} else if (Hls.isSupported()) {
    		hls1.loadSource(videoSrc);
    		hls1.attachMedia(video);
    	}
    }

 이렇게 비디오 스트리밍 hls 지원 여부 확인을 위해 분기하는 부분에서  video에 playsinline 속성만 추가해주면 된다.

영상 재생이 안되는 문제는 autoplay를 걸어줘도 자동재생이 되지 않아서 생기는 문제였다.

 

 

그럴때는 비디오 태그에 아래의 간단한 한줄을 추가해서 해결할 수 있다..! 

$('#videoPlay').attr('playsinline','');

 

 

 

|추가 hls 관련 오류

hls@latest script를 사용할때  404가 뜨면서 로드 오류가 발생 할 수 있다.

그럴때에는 

 

https://cdn.jsdelivr.net/npm/hls.js@latest 이거 대신 다음 url을 작성해주면 된다.  앞의 주소는 뒷 주소의 단축주소이다.  https://cdn.jsdelivr.net/npm/hls.js@latest/dist/hls.min.js.