게시판
파일 크기가 허용 용량을 넘어 분할 압축합니다. 두개를 받아서 푸세요. 그누 포인트 게임입니다. 매주 한개씩 공개합니다. 모바일 지원합니다. 1. score 게시판 생성 s...
유튜브 리스트 플레이어
링크
http://www.mediaplayer.kr/main/tip/22 (474) http://media.login365.net/video/youtube/v_01.php?youtubeList=list.txt (213)
근 10년 만에 들어온 것 같네요.ㅜㅠ
플래시 액션질을 주로 하다가 중간에 흥미를 잃고 이러 저러 하던 중 플래시를 거의 못하게 된 상황에서 유튜브 동영상을 좀 만져 보다가 도움이 될까 싶어 아주 저렴한 팁 공유합니다.
유튜브 리스트 플레이어입니다.
소스도 가장 고전(?)적인 형태로 만들었습니다.
----------
기본문서 - http://media.login365.net/video/youtube/v_01.html
아래의 스크립트 부분만 고쳐 줍니다. 같은 패턴으로 일련번호를 먹이면서 적어주면 일련번호만큼 리스트가 만들어집니다.
<script>
youtubeList_1 = ['1번아이디', '1번곡정보'];
youtubeList_2 = ['2번아이디', '2번곡정보'];
youtubeList_3 = ['3번아이디', '3번곡정보'];
.
.
.
playerOrder = 0; // 0은 랜덤으로 재생 / 1은 1번곡부터 재생 / n은 n번곡부터 재생
headImage = 'head.jpg'; // 상단이미지 주소
footImage = 'foot.jpg'; // 하단이미지 주소
</script>
나머지 스크립트에서 정의된 스타일대로 pc 와 모바일 양쪽 옵션을 주었습니다.
이를테면
playerSize = { pc:'960px', mobile:'100%' };
는 플레이어 가로크기가 pc에서는 960px, 모바일에서는 100%로 세로크기는 16/9 로 자동 리사이징 됩니다.
나머지 부분은 보면 아실 거에요. 기타 스크립트에서 준 스타일 이외에 다른 스타일을 더 주고 싶으면 css 를 취향대로 맞춰주면 됩니다.
상하단 이미지를 사용하고 싶지 않으면 headImage = ''; 이런 식으로 빈칸처리 해 주세요.
pc 와 모바일을 구분하는 소스도 가장 저렴한 소스를 사용했으니 다른 소스를 얹으셔도 됩니다.
----------
http://media.login365.net/video/youtube/v_01.php?youtubeList=list.txt
플레이어 옵션을 js 파일로 만들어 겟변수 처리하였습니다. js 의 확장자는 txt 로 주었습니다.
http://media.login365.net/video/youtube/list.txt
php주소?youtubeList=js주소 이런 형식입니다.
----------
게시판 적용은 크게 3가지가 있습니다.
1. 여분필드를 하나 만들어서 js 의 주소를 입력한 후 youtubeList=wr_1.value 이런 식으로 뿌려줍니다.
2. 게시판에 txt 파일을 첫번째로 업로드하면 자동으로 youtubeList=첨부파일주소[0] 이런 식으로 뿌려 줍니다.
그런데 사실 js 파일을 올릴 수 있게 하면 아무래도 홈페이지 내장이 다 까발려질 수도 있기에 아무래도 느낌이 좀 그래서...
3. http://media.login365.net/video/youtube/v_01_input.php 이와 유사한 방식으로 여분필드를 5개 만드는 것이 좋을 것 같네요.
유튜브 고유 아이디는 1번아이디##2번아이디##3번아이디##4번아이디 이런 식으로 입력하게 만들고 split('##') 으로 배열에 담아 뿌리는 방법입니다. 곡정보의 경우도 동일합니다.
----------
게시판으로도 공유할게요. 원래는 loadVideoById('고유아이디') 로 동영상을 바꿔보려 했는데 되었다 안 되었다 해서 그냥 아이프레임의 src 를 바꾸는 이벤트로 만들었습니다.
첨부파일에는 3개의 문서와 하나의 리스트파일, 상하단 이미지 모두를 같이 올려 놓았습니다.
----------
----------
2021년 04월 21일 오후 11시 50분에 수정파일 올렸습니다. 죄송합니다.ㅜㅠ
아이프레임 주소 바꾸는 이벤트를 loadVideoById('고유아이디') 로 바꾸고 정지 상태에서 리스트 클릭하면 동영상이 재생되는 이벤트를 추가하였습니다.
버전 정보
테스트한 버전
5.4.5.3
호환 가능 버전
5.3 이상 이하
|
댓글을 작성하시려면 로그인이 필요합니다.
로그인
그누보드5 스킨
좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
게시판
그누 포인트 게임입니다. 매주 한개씩 공개합니다. 모바일 지원합니다. 1. score 게시판 생성 save.php에 보면 score 게시판명 넣는 것이 나옵니다. 아래처럼 나오...
게시판
유튜브 리스트 플레이어를 보드에 적용해 보았습니다. 게시판 글쓰기에서 아래의 형식으로 기입합니다. playerOrder = 0; headSkin = 1; footSkin =...
레이아웃
그누보드 버전은 5.4.3입니다 3차메뉴 기능이 필요해서 스킨을 찾아봤는데 만족스러운 스킨을 찾기가 힘들어서(그냥 메뉴코드는 2차인데 하드 php코딩으로 3차인것처럼 보이게 한...
게시판
근 10년 만에 들어온 것 같네요.ㅜㅠ 플래시 액션질을 주로 하다가 중간에 흥미를 잃고 이러 저러 하던 중 플래시를 거의 못하게 된 상황에서 유튜브 동영상을 좀 만져 보다가 도움이...
게시판
그누 포인트 게임입니다. 매주 한개씩 공개합니다. 모바일 지원합니다. 1. score 게시판 생성 save.php에 보면 score 게시판명 넣는 것이 나옵니다. 아래처럼 나오...
게시판
이 스킨은 옵션님이 몇년전에 올려주신 것을 제가 사골을 우리고 있습니다... 보들이유님의 오늘 본 게시물 스킨 https://sir.kr/g5_skin/12664 펄스나인님...
게시판
그누 포인트 게임입니다. 매주 한개씩 공개합니다. 모바일 지원합니다. 1. score 게시판 생성 save.php에 보면 score 게시판명 넣는 것이 나옵니다. 아래처럼 나오...
최신글
이 스킨(팁) 은 더 이상 다운로드 받으실 수 없습니다^^ 기능이 업그레이드 되어 아이스크림 정식버전에 탑재되어 구버전인 이 스킨(팁)은 더 이상 호환되지 않아 제공하지 못 합니다...
댓글 27개
아이돌 플레이어 만들었는데..
추천 꾹 누르고 갑니다!
추천해주셔서 감사드립니다
좋네요.~^^
제 사이트에 맞게 조몰락 해봐야겠습니다.
왠지 재미있을 듯 합니다.
아이폰에서 리스트가 안보이네요, ㅠㅠ
font css 때문인거 같기는 한데!!!
[http://sir.kr/data/editor/2104/149beb3470a5e514ef69ae844216d295_1619086002_024.png]
이번 주에 아들 오면 살펴볼게요.
그 부분만 수정해서 사용하세요.