웹브라우저에서 와이파이 감지하기

카테고리 : 웹 프로그래밍/HTML

만약, 영상을 WIFI환경에서만 자동재생시키고 싶을때 웹브라우저에서 와이파이임을 확인해야할 때가 있다.

 

예전에 작성해둔 코드인데 올린건 오늘 올렸다.

function isWIFI() {
  var conn = navigator.connection || navigator.mozConnection || navigator.webkitConnection || 0;
  if(!conn){return -1;}
  if(typeof(conn.type)!="undefined"){
    switch(conn.type){
      case "wifi":
        return 3;
      case "cellular":
        return 0;
      default:
        return -1;
    }
  }else if(typeof(conn.saveData)!="undefined"){
    if(conn.saveData){
      return 1;
    }else{
      return 2;
    }
  }else{
    return -1;
  }
}

 

함수 호출 방법

isWIFI();

 

사용 예시는

function autoplay(){
	switch(isWIFI()){
      case -1:
      case 0:
      case 1:
      case 2:
          return false;
      case 3:
          return true;
      default:
          return false;
  }
}

와이파이 환경에서만 true를 반환 합니다.

 

function autoplay(){
	switch(isWIFI()){
      case -1:
      case 0:
      case 1:
          return false;
      case 2:
      case 3:
          return true;
      default:
          return false;
  }
}

wifi와 데이터 사용제한이 없는 기기(예 : PC)에서 true를 반환합니다.

 

함수 호출 결과

  • -1: 확인할 수 없는 브라우저
  • 0: cellular (모바일 데이터 환경 : 3g, 4g 등)
  • 1: saveData=true (cellular or wifi or PC) 접속환경이 정확하지는 않으나 데이터 사용제한
  • 2: saveData=false (cellular or wifi or PC) 접속환경이 정확하지는 않으나 데이터 제한 안함
  • 3: wifi (와이파이)

 

네이버나 구글 애드센스의 영상재생광고는 이렇게 와이파이를 감지해서 와이파이 환경이라면 자동재생하고,

아니라면 클릭하여 재생하기 버튼으로 표시됩니다.

 

 

라이센스

이 기능은 MIT라이센스로 배포합니다.

  • 상업용도 허용
  • 코드 변경가능
  • 개인적 사용가능
  • 보증하지 않음 (코드 동작, 고객 지원)
  • 라이센스와 카피라이트 표기

 

동영상 자동재생 팁.

일부 브라우저에서 자동재생을 허용하지 않는경우가 있습니다.

이는 muted를 설정하면 자동재생이 가능합니다.

영상이나 소리 자동재생은 사용자를 불쾌하게 할수있기때문에 이러한 제한사항이 조금 있습니다.

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글