근 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('고유아이디') 로 바꾸고 정지 상태에서 리스트 클릭하면 동영상이 재생되는 이벤트를 추가하였습니다.