질문/조언팁/리소스 공유

https://xetown.com/point_contents/1167294

 

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

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

 

 

글쓴이 karma

profile
imageprocess Github : https://github.com/soonjae/imageprocess
통합검색확장모듈 Github : https://github.com/soonjae/isx
아빠팬더곰은 영원한 초보
  • ?
    대애박 완전 잘 쓰겠습니당
  • profile
    이제야 귀가 중인데 얼른 들어가서 다운 받아야겠어요 :)
  • ?
    새해 선물이 또!!! ^^ 정말 감사합니다.
  • ?
    정말 대단하시다는 말밖에.. 감사합니다!
  • ?
    너무 좋아요. 감사합니다.
  • ?

    test.jpg

     

    감사합니다 ~~~ 

    그런데 ..첨부파일 등록하니 위의  1.mp3로만 나오고 자동으로 재생이 안되네요 ...

    (초보입니다)  

    1.mp3를 클릭하면 플래이창으로 넘어가서 플래이가 됩니다.  ㅜㅜ 

    어떻게 하면 자동 재생 될까요 ? 

  • ? profile

    K-20190218-531666.png

    자동플레이 사용을 선택하시면 자동으로 플레이됩니다.

    그런데 수정을 하신 건가요?

    UI가 정상은 아닌 것같습니다.

  • ?

    너무너무 사용하고 싶어 계속 시도를 해보고 있는 중인데 이번엔 mp3를 첨부하면 버튼 부분이 안 나오고 그냥 까맣게 나옵니다.

    자동플레이로 설정하면 노래가 재생되는걸로 봐선 제대로 실행은 되는 것 같은데,

    버튼이 안 나오다보니 재생/멈춤등의 제어가 안 되서요. 어디를 살펴봐야 하는걸까요?

    KakaoTalk_20190324_140530432.png

  • ?

    좋은 자료 정말 감사드립니다.

    섬네일 기능 중 '첨부파일로 저장' 선택 시 이런 에러가 발생합니다.

     

    tube.png

  • ? profile
    허걱~~
    업데이트 과정에서 함수가 하나 누락되었네요.
    패치해야겠네요...
  • profile ?
    아 감사합니다. ㅎㅎ
  • ? profile
    패치해서 올렸습니다.
  • profile ?
    네. 확인하였습니다.
  • profile
    좋은 자료 감사합니다. 한가지 질문이 있는데, RSS 로 가져온 데이터에도 동작을 잘 하는데요. 썸네일은 가져오지 못하더라구요. 하루종일 검색과 소스 수정을 해봤는데 안되더라구요. (등록된 글 수정을 하면 썸네일이 제대로 나오긴 합니다.) 죄송스럽지만 해결 방법이 있을까요?
  • profile

    제목 없음-1.jpg

     

    좋은 애드온 감사합니다.

     

    유튜브 링크 재생 잘 되고요, 첨부파일 재생도 잘 됩니다.

     

    다만 상기 스크린샷과 같이... 첨부파일 영역에서 동영상 플레이어가 벗어납니다.

     

    어디를 손봐야 할까요?

     

    스킨은 아플로스 V2 입니다.

  • ?
    최고네요!!
  • ?
    유튜브 링크만 따로 해보고싶었는데 뭔가 이상하게 출력이되네요..
  • profile
    본문에 유튜브 주소 넣으면 재생되는거 아니였나요??? ㅜㅜ 왜 안나오지
  • profile

    자문자답 입니다

    사용게시판 체크설정이 문제였네요

    감사합니다 썸네일까지 완벽하네요!! ㅜㅜ 눈물이