플로팅 플레이어 애드온 (라이트버전) V0.1 (06/13/2017)

 

video태그를 이용한 영상 및 iframe태그(유투브, 비메오, 판도라, 네이버, 다음, 등등)

아이프레임을 이용하는 영상플레이어를 스크롤시 하단 오른쪽에 플로팅하여 줍니다.

브라우져 창의 사이즈가 변경되는 경우 화면 해상도에 따라 플로팅 사이즈를 16:9사이즈

비율로 재정의 하여 줍니다. 
        

가벼운 라이트 버전으로 사이즈, 위치, 버튼, 유튜브api등 사용자가 선택하는 옵션을

배제하였습니다. 애드온에서 별도의 환경설정은 없습니다.

 

대부분의 스킨을 지원합니다. (스케치북 스킨, 스케치북 유튜브스킨, 유튜브 모듈지원)

대략적으로 다 될것이라고 생각합니다..^^; (iframe, video라는 테그만 찾기 때문에...)

구글 애드센스등 광고와 충돌하지 않습니다. 

 

허용문자열을 추가하시려면 애드온폴더

/floating_player/js/floating_player.js 에서 직접 수정하시면 됩니다. 

필요없으신 문자는 허용문자열에서 직접 제거하시면 됩니다.

 

기본으로 들어가있는 허용 문자열 고유이름은 아래와 같습니다.    
var allowedString = ['youtu','vimeo','dailymotion','pandora','tvpot','videofarm.daum.net','openload','hanvid','hdfree','k-vid','ggvid','thevideo','ultravid','vid.me','Player.nhn','dramacool','yourupload','estream','vidlox.tv','vidnow','ok.ru','ilovevid','player.twitch.tv','ustream.tv','metacafe.com/embed','player.youku.com'];

 

플로팅된 영상을 닫거나 숨기기 기능

/floating_player/js/floating_player.js 에서 직접 수정

var actionClose = 1; // 0 : 닫기, 1 : 숨기기

 

모바일 디바이스별 플로팅 영상 사이즈 변경

/floating_player/js/floating_player.js 에서 직접 수정

 

플로팅 되는 전환모션이 나타나지 않게 하거나, 속도를 조절하려면

css폴더의 floating_player.css에서 직접 수정

transition:all 0.8s;을 지우거나 전환숫자를 변경하세요.

 

이 버전은 라이트버전으로 버튼의 위치, 크기등, 유튜브 API등 사용을 할 수 없습니다.

기능이 최소화된 버전으로 기능을 직접 css 수정(버튼모양, 사이즈),

js 수정(플레이어사이즈,허용문자열)하여 사용하셔야 합니다.

조금 아주 조금 불편 할 수 있습니다. ^^;

 

라이트 버전이므로 기능은 추가되지 않으며,

버그는 잡습니다. 많은 피드백 부탁드립니다.

 

Atachment
첨부
  • profile
    특정 레이아웃 혹은 skins에서는 아예 동작하지 않는 문제가 있습니다. 쪽지로 피드백 드리면 될까요?

    작품 자체는 꽤 좋네요
  • profile profile
    피드백 대환영입니다.
    특정레이아웃, 스킨이라 어떤 레이아웃과 스킨인지 궁금합니다.
    쪽지주시면 확인하여 보겠습니다. 링크를 주시면 더욱더 좋을것 같네요.
  • profile profile
    확인해본 결과
    알려주신 페이지에서는 현재 제가 등록한 자료를 사용하고 있지 않고 있습니다.
    제가 제작한것으로 해보시길 바랍니다. 확인해보시고 다시 답변부탁드립니다.
  • profile
    닫기 했을 때 위 아래로 내려보시면 모션이 작동합니다.
  • profile profile
    숨기기일경우에는 모션이 동작합니다.닫기옵션이 설정되면 모션은 동작하지 않습니다.
    저번에 플로팅 밀림현상때문에 코드적어드렸었는데... 수정하다보니 다시 만들게 되었네요.
  • profile profile
    아 그렇군요~
  • profile
    제가 https://xetown.com/index.php?mid=xepoint&page=1&document_srl=609158
    의 애드온을 사용중에 있는데 모바일에서
    레이아웃을 모바일 레이아웃을 따로 지정해주면 되는데
    반응형으로 하면 동작을 안하더군요
    혹시 이 애드온은 반응형에서도 동작을 하나요?
    -------------------------------------------------------------------
    다시 확인해보니 다른 레이아웃은 잘됩니다.
    현재 제가 사용하는 레이아웃이 문제인듯합니다.
    혼란드려 죄송합니다.
  • profile profile
    이 애드온은 반응형으로 작동됩니다.
    해상도에 따라 플로팅 사이즈가 달라집니다.
  • ?
    감사합니다.
  • profile
    애드온 감사히 잘 사용하고 있습니다. 좋으네요.^^
    저 같은 경우에는 모바일에서도 잘 되는데,
    문제는 모바일을 가로로 봤을때 동영상이 화면에 꽉차게 크게 나오던 것이 작동을 안합니다.
    저만 그런건지 다른 분들도 그런건지 궁금합니다.
  • profile profile
    무슨뜻인지 잘 이해가 되지 않네요.
    전체화면을 의미하시는것인지요?
    이 애드온과 전체화면 기능하고는 상관 없습니다만
    안드로이드에서는 문제가 없는것으로 보입니다.
  • profile profile
    모바일 세로로보면 영상이 작고 가로로 보면 자동으로 전체화면으로 영상이 꽉 차게 나오 잖아요.
    근데, 저는 애드온을 모바일에 적용하면 휴대폰을 가로로 봐도 영상크기가 전체화면으로 안되고 세로로 볼때와 크기가 같습니다. 저도 안드로이드인데 저만 그런가 보군요.^^ 왜 그렇지.
  • profile
    감사히 잘쓰겠습니다...^^
  • profile
    안타깝게도 PJAX 보드에서는 사용이 안되는것 같네요 ㅠㅠ
  • profile profile
    피드백 감사드립니다.
    제가 유료인 PJAX 보드를 살 여력이 되지 않아서..^^;
    테스트를 해보지 않았지만, 생각해 보면 당연히 안될것 같습니다.
    기존의 로딩방식이 아니므로 애드온이 작동할 수 없을것입니다.
    하지만 데이터를 가져올때 엘리먼트나 기타 변경되는 이벤트를 찾아
    작동이 가능하게 할 수 도 있겠지만, 이 버전은 업데이트가 지원되지 않는
    라이트버전이며 또한 유료 PJAX 보드를 구매하여 테스트를 해 볼수도 없기에
    이 애드온을 구매하시려는 PJAX 보드 사용자님은 참조하시길 바랍니다.
  • profile profile
    답변 감사드립니다. 뭐,, PJAX 보드에서는 안돌아도 다른 게시판에서는 작동하니 감사하게 사용하겠습니다 ㅎㅎ
  • profile profile
    https://xetown.com/index.php?mid=lakepark&category=5779&document_srl=635138
    게시판 설정에서 pjax기능은 끄세요. 꺼도 새로고침 없는 댓글작성등은 작성가능합니다.
  • profile profile
    오, 이런 방법이 있었군요.. 감사합니다! 꼭 적용해보겠습니다 ㅎㅎ
  • profile profile
    답변 감사드립니다.
    알려주신 기능을 주석처리하여 사용이 되었으면 하네요.
    사용하시는 플로팅 애드온과 본 애드온은 다소 틀린 부분이 많으므로
    사용이 안될 수 도 있습니다. 이 글을 보시는 분들 적용해 보시고 피드백 부탁드립니다.
  • ?
    감사합니다!
  • profile
    감사합니다.
  • profile
    안녕하세요. 감사히 잘 사용하고 있습니다.
    floating_video ver 0.6.1 이거 사용하고 있었는데, 모바일에서 가로로 봤을때 영상화면이 꽉 차지를 않아서 사용하지 않고 있다가. 오늘 우연히 보니 버전이 제가 다운 받았던거와 다르군요.
    그래서 얼른 다운 받아서 보니 모바일에서 가로로 봤을때도 영상화면이 꽉 차게 나오고 이상이 없습니다.
    근데, pc에선 아예 나오지도 않고 적용이 안되는군요. 저만 그런건지 원래 그런건지 궁금합니다.
    그러면, pc에선 floating_video ver 0.6.1 이 애드온을 사용하고
    모바일에선 floating_player_v0.1 이 애도은을 사용하는 건가요. 두개를 같이 사용하는 건지요?
  • profile
    안드로이드의 삼성인터넷 기본 브라우저와 모바일 크롬에서도 어떨때는 나왔다가 또 완전히 안나오다가. 또 어떨때는 한번 나오다가 또 완전히 안나오다가 하네요. 나오다 안나오다 하는데 저만 그런가요.
  • profile profile
    floating_video는 제가 제작한 애드온이 아닙니다. 제작자를 확인하시기 바랍니다.
    감사는 floating_video애드온 제작자에게...

    저도 floating_video 애드온을 사용하다가 오류 및 레이어가 밀리는 현상등이 있어
    제 나름되로의 방식으로 새롭게 애드온을 제작하였습니다.
    PC에서 나오지 않는다는것은 애드온에 해당되는 기본적으로 클래스가 없거나
    특정 유료로 판매하는 보드스킨을 사용하는 경우, 보드스킨이 제작자에 의해 특화된 경우,
    특화된 보드스킨의 스크립터 충돌이 있을 수 있습니다.
    또한 해당 애드온의 기본적인 클래스 선택자가 다른경우에는 작동되지 않습니다.
    이 애드온은 설명을 참조하시길 바라며 이 버전은 라이트 버전으로
    사이즈 등을 수정하시려면 직접 해당 css부분을 수정하시길 바랍니다.

    애드온은 PC와 모바일 사용이 분리되며 애드온은 원하시는되로 사용하시면 됩니다.
  • profile profile
    나왔다 안나왔다 하는것은 좀 이상하네요.
    다른 기기를 이용하여 테스트 해보시길 바랍니다.
  • profile profile
    네. 답변 감사합니다. 게시판은 스케치북이고 레이아웃도 스케치북 레이아웃과 xe오피샬 입니다만.
    제가 클라우드플레어를 사용하고 있는데... 혹, 이것 때문일수도 있을까요? 좋은 하루 되세요.^^
  • profile profile
    기본적인 스케치북 스킨이라면 문제될 것이 없습니다.
    혹시 몰라 테스트를 진행하여 보았으나 정상작동됩니다.
    또한 클플때문은 아닐것입니다.
    회원정보에 있는 사이트에 접속하여 확인하여 보았습니다.
    일단 PC페이지에서는 다른분의 애드온인 floating_video 애드온을 사용하고 계시는데
    js가 작동하지 않는것으로 보아 충돌 또는 애드온의 위치 정보가 적용되지 않아
    애드온이 작동하지 않는것으로 생각됩니다.
    모바일에서는 저의 애드온을 사용하시고 계시는데 정상작동하는것으로 보아
    레이아웃이나 다른부분은 문제가 없는것으로 보입니다.
  • profile profile
    네. 답변 감사합니다. 클플은 pause 시켜놓고 해봤는데 클플 문제는 아니더군요.
    이상하게도 제 휴대폰에서는 한참 잘 나오다가 안나오다가 하는데 도무지 이유를 모르겠습니다.
    휴대폰도 몇달 안된 새것입니다. 그리고, pc에서는 아예 안나와서 다른 분걸 적용해놓고 있는데요.
    참 희한합니다. floating_video 를 삭제하고 해봐도 안되고... 관리자 애드온페이지에서 floating_player 뒤에 "삭제"가 없습니다.애드온들을 보면 "삭제"가 없는게 몇개 있던데, 혹 이게 무슨 관련이 있는건가요? 좋은 하루 되세요.
  • profile profile
    애드온 페이지에서 삭제에는 원래 없습니다.
    옛날 코어 버전을 사용하시는것 같으시네요. 아울러 jquery버전도 낮은 버전이고요.
    지금 또 보니 작동이 안되는군요. 뭔가 문제가 있는듯 합니다. --
    되어다가 안되었다가 하는군요.
  • profile profile
    xe는 1842버전 입니다.
    일단 시간 날때 애드온을 하나씩 꺼가면서 충돌이 있나 한번 확인해 봐야 겠네요.
    감사합니다.
  • profile profile
    제가 유튜브모듈 1.1.1버전을 사용하고 있습니다.
    https://www.kkili.net/youtube 여기를 pc로 한번 보십시요.
    여기만 작동이 되는군요. 근데 문제는 크게 나와야 할 본 영상이 아주 조그맣게 나옵니다.
    유튜브 모듈과 충돌이 일어 나는건가요?
  • profile profile
    로딩시 영상사이즈가 기본사이즈가 360으로 되어 있는것 같으신데요.
    유튜브모듈에서 사이즈 수정이 가능한것으로 알고 있습니다.
  • profile profile
    네. 답변 감사합니다. 유튜브 모듈 영상사이즈는 640 360으로 처음부터 설정해 놓고 있습니다.
    제가 영상사이즈를 좀 크게 동일하게 나오게 하기 위해서 iframe,embed 동영상 자동 리사이징 애드온 (iframe_resize) 을 pc에서만 적용시켜 놓고 사용하고 있었는데요. 이걸 체크해제하니 유튜브 모듈에서는 본영상 크기도 정상적으로 작동이 됩니다. 근데 유튜브모듈 하나 외에는 또 여전히 작동이 안되네요. 희한합니다. 문제의 원인을 못찾겠네요.^^ 좋은 하루 되세요.
  • profile profile
    그렇군요.. 작은 사이즈로 나온것은 iframe_resize애드온보다 우선시 되었서 그런가 봅니다.
    저도 애석하네요. 동일레이아웃 스킨에서 테스트를 했지만 이상이 없는데..
    유튜브채널에서 되는것은 레이아웃이 없어서 그런가 싶기도 하고요..
  • profile profile
    유튜브 모듈에 xe오피샬 레이아웃을 적용시켜보니 안나오구요. 스케츠북 레이아웃을 적용시키니 나옵니다. 유튜브모듈에 레이아웃을 미적용 시킨 이유는 레이아웃이 제대로 안나오고 좀 망가져 나오더군요. 그래서 유튜브모듈에는 레이아웃을 사용하지 않았거든요. 유튜브모듈에 문제가 있는건지. 언제 한번 확인해 봐야 겠습니다. 감사합니다.^^
  • ?
    애드온 설정이 없다는 점이 다소 마음에 걸리지만 멋진 자료입니다. ^^
  • ?
    감사 잘 쓰겠음니다~
  • ?
    좋은 자료 감사합니다! 잘 사용할게요!
  • profile
    오 이런것이 이었네요 ㅎㅎ
  • profile
    잘 작동되네요. ^^
    감사합니다.
  • ?
    매우 감사합니다^^..
    http://tenniseye.com

    잘 됩니다...여러개를 한꺼번에 보는것은 욕심 이겠죠^^
  • ?
    굿입니다~!
  • ?
    감사합니다.
  • ?
    XE임베드 파싱 모듈과 함께 사용중인데요. 이상하게 레이아웃의 특성인지 저는 잘되지가 않네요. 모바일 레이아웃에서도 작동치 않고...
    http://martmonster.com/recipe/162711
  • ?
    https://xetown.com/rxe_market/800720 이걸 설치하면 유뷰트 영상크기가 최소로 나옵니다. 100%해도 작게 나오는 오류가 있습니다. 혹시 수정해주실수 있을까요? 모두 꼭 필요합니다.
  • profile
    iframely api 사용하면 작동 안해요 ㅠㅠ.. 주소를 빠궈버려서..
    아래 처럼 되거든요.
    data-iframely-url="//cdn.iframe.ly/api/iframe?url=https%3A%2F%2Fwww.youtube.com%2Fembed%2Fp0dKKDO3ooc%3F&key=ad1fd19faa2f0424ee7b986a459fbdf4"
  • profile
    별 만땅 드리고 싶지만 일단은 안되서요 ㅠㅠ
    윈컴이 님 the bootstrap 레이아웃에 스케치북5 사용중입니다.
    자동 임베드가 코어에 포함이던가요... 제작자 네이버 인거보니 맞는거 같긴 한데
    어쨌든 자동 임베드 애드온 활성화 시켜둬서 공유 주소만 붙여넣고 글 등록하면 동영상이 나타나게 되어 있습니다.
    전혀 동작 하질 않네요 ㅠㅠ

    http://wildcats.co.kr/xe/rcboat/742
  • ?
    좋아요
  • profile
    감사합니다
  • ?
    정말 감사합니다.
  • profile
    감사합니다.
  • profile
    감사합니다 ^^
  • profile
    감사합니다
  • profile
    감사합니다 ~~~