[jquery] 모바일 video autoplay 관련 정리와 인앱 브라우저 체크 방법

이전에 PC 크롬에선 audio autoplay가 안되는 이슈가 있었다.

사용자 웹접근성을 기반으로 위배되지 않도록 제약이 걸리는 경우가 대다수인데,

특히나 모바일같은경우엔 더욱 철저하게 지켜진다.

모바일은 다양한 브라우저와 인앱 브라우저 등이 있다.

이때 video (mp4) 자동 재생에 관련해서 이슈가 굉장히 많은데, 유형은 크게 2가지로 나뉘어진다.

1. 영상지원이 안되는 경우

해당 비디오의 재생여부를 확인할 수 있는 javascript가 있다.

HTMLMediaElement.canPlayType()

구문 섹션

str = audioOrVideo .canPlayType ( mediaType );

매개 변수 섹션

미디어 종류

DOMString미디어의 MIME 타입을 포함.

반환 값 섹션

String. 가능한 값은 다음과 같습니다.

• 'probably': 지정된 미디어 유형이 재생 가능한 것으로 보입니다.
• 'maybe': 미디어 유형을 재생하지 않고도 재생할 수 있는지 여부를 알 수 없습니다.
• '' (빈 문자열) : 지정된 미디어 유형을 확실히 재생할 수 없습니다.

예시 조건문 : if(!(document.createElement('video').canPlayType))

참조문서 : https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType

2. autoplay가 안되는 경우

우리가 오류라 생각하는 현상은 대다수가 autoplay 문제이다.

메인에 배경으로 영상을 깔아주고 document 진입시 비디오 자동재생을 시키는데 

단순히 이걸로는 autoplay가 실행됐는지 안됐는지 체크할수가 없다.

그래서 해당 영상의 프로게스바를 체크하여 0% 이상이 안될때 바로 넘어가게 체크해줬더니

일반 브라우저에선 괜찮지만 몇개의 인앱 브라우저에서 체크가 되지않아 말썽인 이슈가 생겼다.

특히나 같은 기종, 같은 os버전, 같은 인앱 버전인데도 어느 핸드폰에선 되고 어느 핸드폰은 안되는 아주 특이한 이슈였다.

 

OS	이슈 브라우저
안드로이드 (Android)	삼성 인터넷 기본 브라우저 (Samsung Internet)
애플 (iOS)	1) 카카오스토리  2) 네이버 밴드  3) 네이버 블로그

그래서 해당 인앱은 아예 영상 대신 시퀀스이미지로 진행하기로 하고

위 네가지는 별도 조건문을 주어 처리하였다.

처음엔 인앱을 어떻게 체크해야할지 고민되었으나 인앱도 스킴이 나뉘어져 있어

PC에서 브라우저 체크하듯이 navigator.userAgent를 통해 진행해주면 된다.

또한 iOS에서만 진행해주어야하므로 기종 체크해주는 변수도 넣어서 같이 조건을 준다.

var broswerInfo = navigator.userAgent; 


var isMobile = {
    Android: function () {
        return navigator.userAgent.match(/Android/i) == null ? false : true;
    },
    BlackBerry: function () {
        return navigator.userAgent.match(/BlackBerry/i) == null ? false : true;
    },
    IOS: function () {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i) == null ? false : true;
    }
};


// iOS 네이버 블로그
if(broswerInfo.indexOf("NAVER(inapp; blog;")>-1 && isMobile.IOS() ){
    이벤트 적용
}

이런식으로 각각 체크하니 편하게 처리가 가능하였다.