링크
http://www.mediaplayer.kr/main/tip/22 (473) 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('고유아이디') 로 바꾸고 정지 상태에서 리스트 클릭하면 동영상이 재생되는 이벤트를 추가하였습니다.
댓글 27개
아이돌 플레이어 만들었는데..
추천 꾹 누르고 갑니다!
추천해주셔서 감사드립니다
좋네요.~^^
제 사이트에 맞게 조몰락 해봐야겠습니다.
왠지 재미있을 듯 합니다.
아이폰에서 리스트가 안보이네요, ㅠㅠ
font css 때문인거 같기는 한데!!!
[http://sir.kr/data/editor/2104/149beb3470a5e514ef69ae844216d295_1619086002_024.png]
이번 주에 아들 오면 살펴볼게요.
그 부분만 수정해서 사용하세요.
게시판 목록
그누보드5 스킨
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 2708 | 레이아웃 | 3주 전 | 35 | ||
| 2707 | 최신글 |
GNUXNS
|
2개월 전 | 199 | |
| 2706 | 최신글 |
GNUXNS
|
2개월 전 | 343 | |
| 2705 | 최신글 |
GNUXNS
|
2개월 전 | 260 | |
| 2704 | 최신글 | 2개월 전 | 257 | ||
| 2703 | 레이아웃 |
비버팩토리
|
2개월 전 | 815 | |
| 2702 | 게시판 | 2개월 전 | 498 | ||
| 2701 | 게시판 |
 배부른북극곰 |
2개월 전 | 329 | |
| 2700 | 최신글 | 2개월 전 | 354 | ||
| 2699 | 최신글 | 2개월 전 | 588 | ||
| 2698 | 게시판 | 2개월 전 | 452 | ||
| 2697 | 최신글 | 3개월 전 | 576 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기