자료실 상세소개
Xe자료실에 있는 자료들은 이곳 저곳에서 제가 필요하다고 생각되는 것들을 모아 놓은 게시판입니다.<br/> 저작권 관계로 자료들을 올리진 않습니다. 원래 사이트의 자료가 없어진 경우는 꼭 필요한 경우는 저에게 쪽지로 주시면 제가 가지고 있는 한도내에서는 보내 드리겠습니다.<br/>저작권침해가 되지 않는 경우에 한 합니다.
조회 수 95 추천 수 0 댓글 0
Extra Form
제작자 카르마
출처 https://xetown.com/point_contents/1167294
적용여부 적용

MediaElement.js와 HTML5 video,audio 태그를 이용한 미디어 플레이어 및 유튜브 링크 애드온입니다. 

 

당초에는 유튜브 뮤직을 링크시켜주는 애드온을 찾다고 없어서 시작했는데 일판이 좀 커졌네요.

애드온 이름을 몇번 바꾸다가 최종적으로 미디어플레이어 애드온으로 정했습니다.

폴더 이름은 mytube

youtube가 '너튜브"라면 mytube는 '내튜브'......

 

https://xetown.com/tips/1167281 참조

유튜브 링크가 메인이 아니고 원래는 첨부한 오디오와 비디오 재생이 주 기능입니다.

1. 업로드된 mp3 및 wav 등의 오디오 파일 재생

2. 업로드된 mp4, mov, 3gp 등등의 비디오 파일 재생

     제가 만들었지만 어디까지 동작할지는 저도 잘 모릅니다. html5 video,audio가 지원하는 것은 다 될 것으로 추측합니다.

3. 유튜브 링크

4. 유튜브 뮤직 링크

5. 위 4가지 기능이 댓글에서도 동작

6. 유튜브 영상과 오디오의 제목과 설명가져오기

7. 리스트재생(미완성)

    목록까지는 가져오지면 UI는 완성하지 못했습니다.

    수정해서 사용하시고 잘되면 공유 부탁드립니다.

8. 반응형 플레이어

    당초 목적은 모바일에서 찍은 동영상을 업로드하고 다음화면서 재생하는 것이어서 모바일과 데스크탑에 다 어울리는 반응형으로 만들었습니다.

9. 썸네일 만들기

    썸네일 애드온 별도로 사용할 필요없습니다. Rhymix에서는 외부이미지로 본문삽입만해도 썸네일이 잘생깁니다.

    XE에서는 잘 안되는 경우가 종종 있어서 아예 썸네일을 첨부화일로 넣는 기능을 만들었습니다. 

 

K-068.png

나머지 설정은 바꿔가면서 테스트해보면 금방 이해할 수 있는 것들이라 설명을 생략합니다.

 

포스터기능은 업로드된 동영상을 위한 것입니다.

유튜브 동영상은 preload 기능을 이용하면 플레이하기 전에 썸네일 화면이 보이지만 업로드된 동영상은 플레이되기 전까지는 아무것도 나나타지 않습니다.

2150.png

처럼 각자의 사이트에 걸맞는 영상을 만들어서 입력해주면 플레이되기 전에도 뭔가를 보여 줄 수 있습니다.

 

마지막으로 제일 중요한 것은 youtube data api key를 입력해야합니다.

입력하지 않아도 동작에는 문제가 없지만 제목과 설명을 가져오지 못합니다.

K-078.png

구글콘솔에 사이트를 등록하고 youtube data api key를 만들어서 입력하면 됩니다.

자세한 설명은 https://developers.google.com/youtube/registering_an_application?hl=ko 를 참조하십시요.

 

api 키를 입력하면 재생창 상단에 제목이 나타나고

K-081.png

제목을 클릭하면 toggle되면서 설명이 나옵니다.

K-082.png

 

모바일에서 백그라운드로 가거나 화면을 끈 상태에서도 플레이가 가능합니다.

단 스마트폰 브라우저앱의 알림기능 , 특히 미디어알림기능이 꺼져있으면 동작하지않습니다.

https://xetown.com/topics/1166111 참조

 

mediaelement.js를 가져다 xe(Rhymix)에 붙여서플레이어를 만들고 있습니다.

작업은 거의다 마무리 되어서 좀더 테스트해보고 공개할 예정입니다.

 

헌데 몇가지 기대이상의 기능들이 있네요.

저도 뭐 js는 그져 가져다 사용하는 입장이라서 아직 내부 기능을 다 이해하지는 못한 상태입니다.

그중에서도 눈에 띄는 점은 모바일 플레이어 기능입니다.

 

일반적으로 유튜브를 플레이시키면 별도의 플레이어가 있는 것이 아니라서 화면을 끄거나 백그라운드로 들어가면 플레이가 중지됩니다.

KakaoTalk_20190207_121703971.jpg

 

하지만 미디어플레이어에 링크해서 플레시키면 플레이어가 뜨네요.

화면을 끄거나 백그라운드로 들어가도 플레이어는 동작합니다.

 

KakaoTalk_20190207_121717734.jpg

스마트폰을 꺼서 호주머니 담은 상태에서도 음악감상이 가능합니다.

연결된 블루투스 기계에서 콘트롤도 가능하고...

 

구태여 유튜브 프리미엄으로 가지 않아도 될 것같습니다...

 

ver : 0.8.1

1. 태그를 사용해서 유튜브를 링크한 경우 여러개의 재생창이 생기면서 발생하던 문제를 수정했습니다.

2. iframe 태그를 사용하던 기존 링크와 호환되게 수정했습니다.

3. 제목과 설명을 유튜브처럼 영상 아랫쪽으로 이동했습니다.

 

ver : 0.8.2

url 및 설명과 제목의 사용여부와 위치를 설정할 수 있게 수정했습니다.

 

[Sample]

https://www.youtube.com/watch?v=tifg16jpNmQ

?

XE Data

Xe자료실에 있는 자료들은 이곳 저곳에서 제가 필요하다고 생각되는 것들을 모아 놓은 게시판입니다.

  1. No Image

    문하우스 애드온들

    문하우스의 애드온 모음집 탭 위젯을 생성하게 해주는 에디터 컴포넌트 - 베타 버전 시험페이지 https://xetown.com/tips/1180004
    Date2019.02.25 Category애드온 Reply0 Views156
    Read More
  2. 미디어플레이어 애드온(MediaElement addon)

    MediaElement.js와 HTML5 video,audio 태그를 이용한 미디어 플레이어 및 유튜브 링크 애드온입니다. 당초에는 유튜브 뮤직을 링크시켜주는 애드온을 찾다고 없어서 시작했는데 일판이 좀 커졌네요. 애드온 이름을 몇번 바꾸다가 최종적으로 미디어플레이어 애...
    Date2019.02.09 Category애드온 Reply0 Views95 file
    Read More
  3. 드래그하여 페이지/문서 이동 애드온

    모바일 환경에서 드래그하여 페이지/문서를 이동할 수 있습니다. 1.1.1 코드 정리 조건문 타입에러 수정 기능적으로는 마지막 업데이트이지 않을까 싶습니다 불친절하게도 관리자설정이 따로 없습니다 tpl/index.html에서 터치영역을 직접 입력하여 사용하세요...
    Date2019.02.09 Category애드온 Reply0 Views66 file
    Read More
  4. jQuery Viewer 애드온(lightbox 계열, 확대축소 가능)

    이미지 클릭시 원본을 보여주는 애드온입니다. 다운로드 하지 않아도 확대 축소가 가능합니다. 기존의 Resposive Photoviewer 애드온을 대신합니다. https://github.com/fengyuanchen/viewer 참조 포토뷰어에 대한 욕심이 많아서 벌써 10여개의 포토뷰어 애드...
    Date2019.02.09 Category애드온 Reply0 Views65 file
    Read More
  5. responsive photo viewer 애드온

    https://github.com/nzbin/photoviewer#readme nzbin의 photoviewer를 XE에 적용한 애드온입니다. 본문내이미지조절 애드온을 끄고 사용하시기 바랍니다. 화면상에서 사진의 확대 축소가 가능하며 마우스 휠을 굴리면 사진의 확대 및 축소가 이루어집니다.
    Date2018.12.29 Category애드온 Reply0 Views65 file
    Read More
  6. 템플릿 컴포넌트

    - '템플릿 컴포넌트'입니다. - 미리 완성된 서식(템플릿)을 이용해 문서를 편집할 수 있게 해주는 에디터 컴포넌트입니다. 기본 기능 - 원래는 회원 발송용 뉴스레터 템플릿을 제공하기 위해 만들었던 컴포넌트입니다. GG님의 관리자 메일 모듈과 같이 쓰면 좋...
    Date2018.07.05 Category기타 Reply0 Views130 file
    Read More
  7. 가입권유 애드온 v2.3

    가입권유 애드온 1. 애드온이 html 상단에 출력되서 발생하던 css 문제를 수정했습니다. 2. 회원가입창등에서 뜨지 않도록 수정했습니다. 3. 로그인 이후에도 뜨는 문제 수정 4. 무료로 전환 (그동안 포인트 먹튀해서 죄송합니다 -_ㅜ ) 본업이 인터넷 관련직...
    Date2018.02.14 Category애드온 Reply14 Views386 file
    Read More
  8. 날씨 위젯

    현재 위치(지오로케이션)기반 날씨 위젯을 만들기로하고 일주일이 지났네요 @.@ 너무 오래 붙잡고 있으면 안될꺼 같아서 주말에 시간내서 마무리 지었습니다. 우선 배포하고 문제가 발견되면 추후 수정하는게 좋다는 생각입니다... ㅎㅎ 개인적으로 사용하던 ...
    Date2018.02.07 Category위젯 Reply0 Views325 file
    Read More
목록
Board Pagination Prev 1 2 3 4 5 ... 21 Next
/ 21
서버에 요청 중입니다. 잠시만 기다려 주십시오...