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을 이용한 bgmplayer 넣기  (0) 2017.07.17
jwplayer 세팅  (0) 2017.07.13
유튜브를 jwplayer로 재생  (0) 2017.07.10
jwplayer playlist  (0) 2017.07.10
jwplayer 반응형  (0) 2017.07.10

티스토리 툴바