-
Notifications
You must be signed in to change notification settings - Fork 3
/
play.html
128 lines (125 loc) · 3.34 KB
/
play.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<head>
<link href="js/video-js-5.8.8.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="js/videojs-ie8.min-1.1.2.js"></script>
</head>
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="" type='video/mp4'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
</br>
</br>
<div>
<label>Tutorial: </label>
<select id="my-tutorial-select" value="">
</select>
<div>
</br>
<div>
<label>Episode: </label>
<select id="my-mp4-select" value="">
</select>
</div>
<script src="js/video-5.8.8.js"></script>
<script>
var tutorials = null;
var video = document.getElementById("my-video");
var tutorial_select = document.getElementById("my-tutorial-select");
var mp4_select = document.getElementById("my-mp4-select");
function loadJSON(file, callback, type="application/json") {
var xobj = new XMLHttpRequest();
type = type || "application/json";
xobj.overrideMimeType(type);
xobj.open('GET', file, true);
xobj.onreadystatechange = function () {
if (xobj.readyState == 4 && xobj.status == "200") {
// .open will NOT return a value but simply returns undefined in async mode so use a callback
callback(xobj.responseText);
}
}
xobj.send(null);
}
function removeAllChildren(elem) {
while(elem.firstChild) {
elem.removeChild(elem.firstChild);
}
}
function fillSelect(elem, options) {
removeAllChildren(elem);
for(var i in options) {
var option = document.createElement("option");
option.value = options[i];
option.innerText = options[i];
elem.appendChild(option);
}
elem.value = options[0];
}
function keys(d) {
var res = [];
for(var k in d) {
res.push(k);
}
return res;
}
function setupSelects() {
fillSelect(tutorial_select, keys(tutorials));
var tutorial = tutorial_select.value;
fillSelect(mp4_select, tutorials[tutorial]);
video.src = mp4_select.value;
}
function selectNext(elem) {
var text = elem.value;
for(var i=0;i<elem.length-1;i++) {
if(text===elem[i].value) {
elem.value = elem[i+1].value ;
break;
}
}
}
function tryplay() {
count = 0;
var play = function() {
if(count>10) return;
if(video.paused) {
console.log(count);
video.play();
}
else {
count++;
setTimeout(play,150);
}
};
setTimeout(play, 150);
}
var onTutorialChange = function() {
var tutorial = tutorial_select.value;
fillSelect(mp4_select, tutorials[tutorial]);
video.src = mp4_select.value;
};
var onMp4Change = function() {
video.src = mp4_select.value;
tryplay();
};
var onPlayEnded = function() {
selectNext(mp4_select);
mp4_select.onchange();
};
document.getElementsByTagName("body")[0].onload = function() {
loadJSON("filelist.json", function(json) {
tutorials = JSON.parse(json);
if(tutorials) {
setupSelects();
tutorial_select.onchange = onTutorialChange;
mp4_select.onchange = onMp4Change;
video.onended = onPlayEnded;
}
});
}
</script>
</body>
</html>