jwBgmPlayer ver.1


앞서 jwplayer7의 설치가 필요합니다

http://nanaskinver4.tistory.com/39


크롬, IE9+ 지원



1. 아래 두개의 파일을 다운로드 후
HTML/CSS 편집-파일업로드로 업로드합니다.

2. HTML/CSS 편집창의 HTML란의 맨 하단을 보시면
</script>
// 여기에 3번의 코드를 집어넣으면 됩니다
</body>
</html>




3. 위의 부분에 아래의 코드를 집어넣습니다

<script>
var jwBgmPlayer = {
	'event': 'jwBgmPlayer',
	'key': jwplayer.key,
	'skin': {
		//'name': 'Seven',
		//'active': 'blue',
		//'inactive': 'white',
		'background': 'black'
	},
	'listskin': {
		'background': '#f7f7f7',
		//'Color': '#333',
		//'hoverColor': '#333',
		//'hoverBG': '#ccc'
	},
	'autostart': true,
	'repeat': true,
	'volume': 50,
	'placement': 'top',
	'playlist': [
		{
			'file': 'http://음악파일주소1.mp3',
			'title': '음악이름1'
		}, {
			'file': '유튜브주소도됩니다',
			'title': '음악이름2'
		}, {
			'file': '음악파일주소3.m4a',
			'title': '음악이름3'
		}
	]
};
</script>
<script src="./images/bgm.js"></script>




4. 입력값 설명


1) 스킨

플레이어의 색상 변경이 가능합니다. ("//"를 제거하면 활성화됩니다.)

active: blue, inactive: red, background: black으로 설정시 위와 같이 나타납니다.

name값은 [Seven, Six, Five, Glow, Beelden, Vapor, Bekle, Roundster, Stormtrooper] 중 택1

'skin': {
	//'name': 'Seven',
	//'active': 'blue',
	//'inactive': 'red',
	'background': 'black'
},


리스트바 스킨 디폴트 값은 다음과 같다

'listskin': {
	'background': '#f7f7f7',	// 리스트바 색상
	//'Color': '#333',			// 글 색상
	//'hoverColor': '#333',		// 마우스 올렸을때 글 색상
	//'hoverBG': '#ccc'			// 마우스 올렸을때 백그라운드
},



2) 자동재생

true / false로 조절

'autostart': true,



3) 반복

true / false로 조절

'repeat': true,



4) 음량

0-100 숫자값으로 조절

'volume': 50,



5) 컨트롤바 위치

'top' / 'bottom' 으로 조절 (따옴표 주의)

'placement': 'top',



6) 플레이리스트

형식에 맞춰 입력해주세요.

갯수를 늘리거나 줄일 수 있습니다.

유튜브 주소를 파일 대신 입력할 수 있습니다.

title은 플레이리스트 목록에 나타납니다.

'playlist': [
	{
		'file': 'http://음악파일주소1.mp3',
		'title': '음악이름1'
	}, {
		'file': '유튜브주소도됩니다',
		'title': '음악이름2'
	}, {
		'file': '음악파일주소3.m4a',
		'title': '음악이름3'
	}, {
		'file': '음악파일주소4.m4a',
		'title': '이렇게 갯수를 늘려도 됨'
	}
]


저작자 표시 비영리 동일 조건 변경 허락
신고

'Video > jwplayer' 카테고리의 다른 글

jwplayer 세팅  (0) 2017.07.16
jwplayer을 이용한 bgmplayer 넣기  (2) 2015.03.20
jwplayer 플레이리스트  (1) 2015.03.17
jwplayer 반응형  (1) 2015.03.17

  1. sevencolor69 2015.09.06 01:35 신고

    안녕하세요 만들어주신스킨 너무나 이쁘게 잘사용하고있습니다! 근데 플레이리스트를 설정하고나서 다른음악으로 바꾸려고 다시 수정하고 변경한파일을 다시 업로드해도 처음에설정한 리스트에서 변경이되지않더라구요ㅠㅠ 혹시몰라서 첨부해주신 scm 과 script 둘다 삭제하고 다시 다운받아서 플레이리스트를 다르게설정했는데도 처음에 설정한 플레이리스트로 나오더라구요ㅠㅠㅠ어떻게해야하나요ㅠ? 항상수고하시는와중에 죄송합니다..!

  2. 틕톡 2015.10.10 20:45 신고

    안녕하세요 ㅠㅠ 만들어주신 스킨 잘 쓰고 있어요! 제가 스킨을 수정하면서 포인트 색상을 변경해서 그러는데 브금 플레이어 색상도 변경하고 싶어서요 ㅠㅠ scm 파일 열어서 색상코드 찾아서 교체했는데도 안바뀌네요 ㅠㅠ #webplayer{border-bottom:1px solid #ff8a8a;} 이부분 수정하면 되는거 아닌가요...!

티스토리 툴바