Coldiary 5 år sedan
förälder
incheckning
9ef401de86
5 ändrade filer med 143 tillägg och 0 borttagningar
  1. 25
    0
      css/player.css
  2. 18
    0
      index.html
  3. 12
    0
      js/init.js
  4. 76
    0
      js/player.js
  5. 12
    0
      sources.json

+ 25
- 0
css/player.css Visa fil

@@ -0,0 +1,25 @@
1
+* { margin:0; padding:0; }
2
+
3
+div#player {
4
+	background-color: #333;
5
+	height: 30px;
6
+	position: absolute;
7
+	top: 0px;
8
+	width: 100%;
9
+	color: white;
10
+	padding-left: 20px;
11
+	line-height: 30px;
12
+	letter-spacing: 10px;
13
+}
14
+
15
+div#player a:hover {
16
+	text-shadow: 0px 0px 5px #fff;
17
+	cursor: pointer;
18
+}
19
+
20
+#YTplayer {
21
+	position: absolute;
22
+	top: 50%;
23
+	left: 50%;
24
+	transform: translate(-50%, -50%);
25
+}

+ 18
- 0
index.html Visa fil

@@ -0,0 +1,18 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+	<meta charset="utf-8">
5
+	<title></title>
6
+	<script type="text/javascript" src="js/player.js"></script>
7
+	<link rel="stylesheet" type="text/css" href="css/player.css">
8
+</head>
9
+<body>
10
+	<div id="player">
11
+		<a id="player-previous">«</a>
12
+		<a id="player-toggle">⧐</a>
13
+		<a id="player-next">»</a>
14
+	</div>
15
+	<div id="YTplayer"></div>
16
+	<script type="text/javascript" src="js/init.js"></script>
17
+</body>
18
+</html>

+ 12
- 0
js/init.js Visa fil

@@ -0,0 +1,12 @@
1
+evaplayer = new Player([
2
+{
3
+	title: "Musique 1",
4
+	link:"519_pOvP9xs"
5
+},
6
+{
7
+	title: "Musique 2",
8
+	link: "519_pOvP9xs"
9
+}
10
+]);
11
+console.log(evaplayer);
12
+

+ 76
- 0
js/player.js Visa fil

@@ -0,0 +1,76 @@
1
+function Player(sources) {
2
+	this.playlist = sources;
3
+	this.current = {};
4
+	this.isPlaying = false;
5
+	this.player;
6
+	this.YTplayer = false;
7
+
8
+	this.init = function() {
9
+		this.loadYTplayer();
10
+		this.bindEvents();
11
+		console.log('init...');
12
+	}
13
+
14
+	this.bindEvents = function() {
15
+		var toggle = document.getElementById('player-toggle');
16
+		toggle.addEventListener('click', this.toggle);
17
+		var previous = document.getElementById('player-previous');
18
+		previous.addEventListener('click', this.previous);
19
+		var next = document.getElementById('player-next');
20
+		next.addEventListener('click', this.next);
21
+	}
22
+
23
+	this.newSong = function (videoId) {
24
+		if (this.YTplayer)
25
+			this.YTplayer.parentNode.removeChild(this.YTplayer);
26
+		this.YTplayer = new YT.Player('YTplayer', {
27
+			height: '0',
28
+			width: '0',
29
+			videoId: videoId,
30
+			playerVars: {
31
+
32
+			},
33
+			events: {
34
+				'onReady': onPlayerReady,
35
+				'onStateChange': onPlayerStateChange
36
+			}
37
+		});
38
+	}
39
+
40
+	this.loadYTplayer = function() {
41
+		var tag = document.createElement('script');
42
+		tag.src = "https://www.youtube.com/iframe_api";
43
+		var firstScriptTag = document.getElementsByTagName('script')[0];
44
+		firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
45
+	};
46
+
47
+	this.seekPosition = function() {};
48
+	this.toggle = function() {
49
+		if (evaplayer.isPlaying) {
50
+			evaplayer.YTplayer.pauseVideo();
51
+		} else {
52
+			evaplayer.YTplayer.playVideo();
53
+		}
54
+		evaplayer.isPlaying = !evaplayer.isPlaying;
55
+		return evaplayer;
56
+	};
57
+	this.next = function() {
58
+		return 
59
+	};
60
+	this.previous = function() {};
61
+	this.init();
62
+};
63
+
64
+function onYouTubeIframeAPIReady() {
65
+	evaplayer.newSong('519_pOvP9xs');
66
+}
67
+
68
+function onPlayerReady(event) {
69
+	event.target.playVideo();
70
+}
71
+
72
+function onPlayerStateChange(event) {
73
+	if (event.data == YT.PlayerState.PLAYING && !evaplayer.isPlaying) {
74
+		evaplayer.isPlaying = true;
75
+	}
76
+}

+ 12
- 0
sources.json Visa fil

@@ -0,0 +1,12 @@
1
+{
2
+  "sources": [
3
+    {
4
+      "title": "Musique 1",
5
+      "link": "https://www.youtube.com/watch?v=519_pOvP9xs"
6
+    },
7
+    {
8
+      "title": "Musique 2",
9
+      "link": "https://www.youtube.com/watch?v=519_pOvP9xs"
10
+    }
11
+  ]
12
+}