Jechue World

var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce','nokia','webos',

'opera mini','sonyericsson','opera mobi','iemobile');

/* pc, mobile 확인 */

for(var i=0;i<mobilePhones.length;i++) {

if(userAgent.indexOf(mobilePhones[i]) != -1){

device = "mobile";

}

}

/* mobile device name 확인 */

for(var txt in mobilePhones){

    if(userAgent.match(mobilePhones[txt]) != null){

    mobileDevice = mobilePhones[txt];

        break;

    }

}

/* browser name 확인 */

switch (true) {

case /trident|msie/.test(userAgent):

browserName = 'ie';

break;

// IE 12(edge)

case /edge/.test(userAgent):

browserName = 'edge';

break;

case /chrome/.test(userAgent):

browserName = 'chrome';

break;

case /safari/.test(userAgent):

browserName = 'safari';

break;

case /firefox/.test(userAgent):

browserName = 'firefox';

break;

case /opera/.test(userAgent):

browserName = 'opera';

break;

default:

browserName = 'unknown';

}

카카오 쓰레기다.

https://developers.kakao.com/

8080포트에서는 서비스 지원을 안한다.

카카오 init 등록하고 사용하면됨

// 카카오 로그인, 카카오API 사용자 정보들고오기

Kakao.Auth.login({

success :function(response) {

Kakao.Auth.getStatus(function(response){

console.log("state : " +response);

if(response.status === "connected"){

Kakao.API.request({

url:'/v1/user/me',

success : function(respose) {

var data= {

user_id : response.user.id.toString(),

type : "K"

}

fn_login(data);

fn_kakao_logout();

},

fail : function(err) {

console.log(err);

return false;

}

});

}

});

},

fail : function(err) {

console.log(err);

fn_kakao_logout();

return false;

}

});

// 카카오 로그아웃

Kakao.Auth.logout(function(response){

console.log(response + "logout.");

})

// 카카오톡 공유

Kakao.Link.sendTalkLink({

   label: '',   // 제목

   image: { 

    // 80 * 80 이상 500KB 이하 제한

       src: ,   // 이미지경로

       width: '800',

       height: '600'

   },

   webButton: {

   text: "",  // 링크제목

   url:      // 앱 설정의 웹 플랫폼에 등록한 도메인의 URL  

// ex ) www.google.com 만 되면 하위 주소도됨 www.google.com/post/1

 }

});

카카오톡이나 카카오스토리나 동영상을 공유하려면 동영상썸네일이 있어야한다.

비디오 태그자체를 썸네일로 몬쓴다. 

그래서 공유세팅할대 url은 동영상 url로 사용하지만 src은 동영상 썸네일 이미지를 사용하면된다.

//  카카오 스토리 공유

Kakao.Story.share({

url: ,  해당 주소

text :   글 제목

});

카카오 스토리 공유는 결국 페이스북의 open graph 를 이용하는거다.

웹에서는 html5 video 태그를 쓰면 잘먹는다.

하지만 아이폰(사파리), 안드로이드(크롬) 에서는

video 태그를 쓸 경우, 썸네일이 나오지 않는경우가 생긴다 (사파리)

안드로이드는 video 태그의 옵션중 controls를 쓰면 보이기는하는데

모바일 웹이 안드로이드만 있는게 아니니 결론적으로 못쓴다.

일일이 userAgent 메서드로 체크를 해서 하면되긴되는데

여기서 또 문제가 카카오 공유했을시 클릭을하면 카카오톡 자체에서 카카오 웹뷰를 띄우는데 

동영상 썸네일이 나오지 않고 플레이버튼만 나온다.

결론적으로 위와 같이 사용해서는 안된다는 결론이다. 내입장에서 나중에 더많이 찾아보면 나올수도 있겠지만..

그래서

video.js 를 사용하면된다. 일단은 아파치 라이센스라 무료

http://docs.videojs.com/

    <link href="http://vjs.zencdn.net/5.0.2/video-js.css" rel="stylesheet">

    <script src="http://vjs.zencdn.net/ie8/1.1.0/videojs-ie8.min.js"></script>

    <script src="http://vjs.zencdn.net/5.0.2/video.js"></script>

위 플러그인만 추가하고

<video class="" id="" controls preload="none" poster="" data-setup="{}">

<source src="" type="video/mp4">

</video>

위와 같이 사용하면된다

poster 태그안에 동영상의 썸네일을 꼭 추가해줘야 처음 화면이 설정된다.

이렇게 사용하면 웹 이든 아이폰 안드로이드 웹뷰 뭐 다된다.

페이스북SDK는 비동기 방식이다

FB.login 로그인 메서드를 사용할때

FB.getLoginStatus를 먼저 체크하고 FB.login 을 사용하면 익스플로러에서는 반응을 못한다.(크롬에선 가능, 사파리 되따가안됬따가)

그래서

// 로그인만

   FB.login(function(response) {

    // 페북 로그인 상태 확인 connected. 사용자가 Facebook에 로그인하고 앱에 로그인

    // not_authorized. 사용자가 Facebook에 로그인했지만 앱에 로그인 안함

        console.log(response);

        //statusChangeCallback(response);

            var data = {

            accessToken : response.authResponse.accessToken,

            user_id : response.authResponse.userID,

            }

            fn_login(data);

            if (response.status != 'connected') {

            return ;

            }

        }, {scope: 'public_profile'});

로그인만 사용하던가 아니면 로그인후 getLoginStatus 를 체크 하면된다.

// 로그인 후 상태 체크

// 페북 로그인

    FB.login(function(response) {

    // 페북 로그인 상태 확인 connected. 사용자가 Facebook에 로그인하고 앱에 로그인

    // not_authorized. 사용자가 Facebook에 로그인했지만 앱에 로그인 안함

        FB.getLoginStatus(function(response) {

        // 콜백 connected 이면 공유 팝업 실행

//            statusChangeCallback(response, sharePopup(href, hp_id));

            console.log("FB.login: " + response);

            console.log(hp_id);

            if (response.status != 'connected') {

            return false;

            }

        });

    }, {scope: 'public_profile'});

etc..

//페북 로그인 상태 콜백

function statusChangeCallback(response) {

  if (response.status === 'connected') {

  } else if (response.status === 'not_authorized') {

      alert("로그인해야 이용가능한 기능입니다.");

  } else {

      alert("로그인해야 이용가능한 기능입니다.");

  }

}

//공유하기

FB.ui(

{

method:'share',

href : url,

},function(response) {

//공유결과 리턴

console.log(response)

if(response === null || response == undefined) {

console.log('공유안함');

} else {

console.log('공유완료');

}

});