유튜브 찬송가 645 js 파일 > 그누보드5 팁자료실

그누보드5 팁자료실

유튜브 찬송가 645 js 파일 정보

유튜브 찬송가 645 js 파일

본문

요즘 아는 지인의 부탁으로 온라인 교회 홈페이지를 만들고 있는데...

하도 찬송가 전곡을 홈페이지에 깔아달라고 해서...

유튜브에서 플레이리스트 하나 파싱하여 js 파일로 만들어 보았습니다.

 

https://blog.kakaocdn.net/dn/AkFRq/btrEhZIUuKy/HEabAgJmg8hIHB2Icllhy1/tfile.js

 

사용하기에 따라 무궁무진한 자료를 만들 수 있을 거에요.

 

결과물은 http://www.mediaplayer.kr/main/bbs/html_editor.php

의 좌측창에 소스입력 후 결과보기 클릭해 보세요.

 

아주 간단하게 찬송가 201장부터 230장까지 가로 4단 정렬하여 썸네일 동영상 코드를 만들어 보았습니다.

유튜브에 전체 동영상을 공유하신 분은 비컴퍼니입니다.^^

 


<script src=https://blog.kakaocdn.net/dn/AkFRq/btrEhZIUuKy/HEabAgJmg8hIHB2Icllhy1/tfile.js></script>
<script>
startHymn = 201;
lastHymn = 230;
widthCut = 4;
document.write("<div id=ytDiv></div>");
ytDiv.style.height = ytDiv.offsetWidth * 9 / 16 + "px";
function ytHtml(yt) {
    ytDiv.innerHTML = "<iframe style=width:100%;height:100%;display:block src=https://www.youtube.com/embed/" + (this['numberList_' + yt][2]) + " frameborder=0 allowfullscreen></iframe>";
}
for (i = startHymn; i <= lastHymn; i++) {
    document.write("<img id=yt_" + i + " style=width:" + 100 / widthCut + "%;display:block;float:left;cursor:pointer src=https://img.youtube.com/vi/" + this['numberList_'+i][2] + "/mqdefault.jpg>");
    this["yt_" + i].num = i;
    this["yt_" + i].onclick = function() {
        ytHtml(this.num);
    }
}
this["yt_" + startHymn].onclick();
</script>
추천
10

댓글 29개


이거 유튜브에 플레이리스트가 있어서 1시간이면 아주 넉넉하게 크롤링이 끝나겠거니 싶었는데 자꾸 한곡이 삑사리가 나서 3시간이나 걸렸네요.ㅜㅠ
"하늘가는 밝은 길이" 그 곡이 누락이 되었더라구요.
js로 xml 로 json 으로 모두 추출해 놓았습니다.
코드를 조금 세련되게 사용하면 가사검색도 사용이 가능하고 가나다순 정렬도 가능하며
첫곡을 제외한 자동재생 및 연속 이어듣기, 한곡 반복듣기, 한곡 한번만 듣기 등도 가능합니다.
정말 대단하십니다. 언뜻 보아도 다양하게 사용이 될 수있을것 같습니다.
메뉴에 1~100장, 101~200장 이런식으로 할 수있고 전체를 다 한페이지에 나오게해도 좋을 것 같습니다.
적용해보니 js파일의 배열 3번째 것을 바꾸니 유튜브영상이 변하는데요.
자신이 올린 유튜브영상이나 좋아하는 영상을 lyricsList_에 적용하면 자신의 유튜브리스트를 만들수도 있겠습니다.
50장씩 적용해보았습니다.
http://gratia.kr/zz/hymn/591_645.php
링크에서 "내일일은 난 몰라요"는 유튜브아이디를 바꾸면 영상이 바뀌는지 테스트한다고 임으로 넣은 것입니다. 제가 만든 영상이기도 하고요.
정성과 노력이 많이들어간 자료를 공개해주시니 고마울 따름입니다.
감사합니다.^^
비컴퍼니분들께 감사해야지요.
그 기독교 컨텐츠 제작 회사는 찬송가공회에서 저작권을 구입해서 유튜브로 오픈해 주었으니 많은 분들이 쉽게 유튜브로 이런 내용들을 접할 수 있습니다.
사실 찬송가 mp3 와 ppt 파일을 모달창으로 연동한 컨텐츠는 제가 만들어 놓은 것이 있습니다만 저작권 때문에 공유를 못하고 있지요.
잠시 코드에 양념을 한번 더 치자면... 찬송가 제목이 표시되고
가장 아래의 버튼을 클릭해도 부드럽게 동영상 부분으로 올라옵니다.
이건 약간만 머리를 굴리면 페이징 처리가 가능하므로 1번부터 645번까지 한 페이지로도 충분합니다.
그리고 nemberList 가 1장부터 645장 까지라면 lyricsList_ 는 가사 가나다순입니다.
마지막으로 krList 는가나다 그룹이구요. 나중 가사검색을 용이하게 하려고 순차변수를 더 만들어 놓은 거에요.


<script src=https://blog.kakaocdn.net/dn/AkFRq/btrEhZIUuKy/HEabAgJmg8hIHB2Icllhy1/tfile.js></script>
<script>
startHymn = 201;
lastHymn = 230;
widthCut = 4;
document.write("<div id=ytDiv></div><div id=titleDiv style=padding:15px;text-align:center></div>");
ytDiv.style.height = ytDiv.offsetWidth * 9 / 16 + "px";
function ytHtml(yt) {
    ytDiv.innerHTML = "<iframe style=width:100%;height:100%;display:block src=https://www.youtube.com/embed/" + (this['numberList_' + yt][2]) + " frameborder=0 allowfullscreen></iframe>";
}
for (i = startHymn; i <= lastHymn; i++) {
    document.write("<img id=yt_" + i + " style=width:" + 100 / widthCut + "%;display:block;float:left;cursor:pointer src=https://img.youtube.com/vi/" + this['numberList_'+i][2] + "/mqdefault.jpg>");
    this["yt_" + i].num = i;
    this["yt_" + i].onclick = function() {
        ytHtml(this.num);
        titleDiv.innerText = this.num + "장 : " + window["numberList_" + this.num][1];
        scrollTo({top:0, behavior:"smooth"});
    }
}
this["yt_" + startHymn].onclick();
</script>
http://lhch.kr/church/9/ 이 페이지 만들어지면 그 코드 드릴게요.
미가엘식으로 가사검색까지 가능하고 전곡연속듣기, 한곡무한반복, 한곡한번듣기 등을 선택할 수 있게 하려구요.
링크된 교회 담임목사님이 웹툰갤러리에서 본 "새벽을 깨우리로다"를 그리신 분이시군요. 온라인교회라 그런지 모바일전용으로 작업하시는 것 같습니다. 필요한 기능이 알차게 잘 들어가 있어서 좋아보입니다. 디자인도 좋고요^^

pc 홈페이지도 있습니다.
http://lhch.kr/pc/
아주 고전적인 스타일로 만들다가 pc 는 필요없다고 해서 같이 만들다 방치했지요.ㅋ
중, 대형교회만 스폿트라이트를 받는데요.
한국교회의 70프로정도가 재정적으로 미자립이라는 글을 본적이 있습니다.
출석교인이 30명 미만의 교회로 건물에 세얻어서 하나님의 사명을 전하는 교회가 훨씬 더 존중받아야 한다고 생각합니다.
비타주리님께서 만든 모바일 홈페이지를 보고 든 생각인데요.
비타주리님께서 모바일홈페이지 소스를 공개해주시면 미자립교회 무료로 홈페이지 만들어주기를 하면 어떨까 생각해봤습니다.
그건 본인이 한번 알아보세요.
제가 알기로 유료재배포가 아니라면 그냥저냥 넘어가는 것 같아요.
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT