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
|
<!doctype html>
<html>
<head>
<title>Watch - {{ filename }}</title>
<script src="{{url_for('mediabrowser.static', filename='hls.js/hls.min.js')}}"></script>
<link rel="stylesheet" href="{{ url_for('mediabrowser.static', filename='style.css') }}"/>
</head>
<body class="watch">
<video controls id="video"></video>
<div id="trigger">
<div id="infos">
<a href="{{ url_for('mediabrowser.m3u8', path=path) }}">
<div>
<img src="{{ url_for('mediabrowser.static', filename='playlist.png') }}"/>
<br/>
HLS with transcoding
</div>
</a>
<a href="{{ url_for('mediabrowser.download_inline', path=path) }}">
<div>
<img src="{{ url_for('mediabrowser.static', filename='playlist.png') }}"/>
<br/>
Inline
</div>
</a>
<a href="{{ url_for('mediabrowser.download', path=path) }}">
<div>
<img src="{{ url_for('mediabrowser.static', filename='playlist.png') }}"/>
<br/>
Download
</div>
</a>
</div>
<div id="logging">
</div>
</div>
<script>
var logger = {
'log': function (message) {
function makeTimestamp() {
var d = new Date();
return d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + "." + d.getMilliseconds();
}
if (!message) return;
var messageEl = document.createElement("div");
messageEl.setAttribute("class", "loggingMessage");
messageEl.appendChild(document.createTextNode(makeTimestamp() + " : " + message));
var loggingEl = document.getElementById("logging");
if (loggingEl.firstChild) {
loggingEl.insertBefore(messageEl, loggingEl.firstChild);
} else {
appendChild(messageEl);
}
}
};
if (Hls.isSupported()) {
var video = document.getElementById('video');
var config = {
debug: logger,
maxBufferLength: 500,
manifestLoadingTimeOut: 20000,
levelLoadingTimeOut: 20000,
fragLoadingTimeOut: 120000
};
video.setAttribute('poster',
"{{ url_for('mediabrowser.poster', path=path) }}");
var hls = new Hls(config);
hls.on(Hls.Events.MANIFEST_LOADED, function(event, data) {
// test if url contains authentication (http://user:pass@host/)
var authUrl = /(http?:\/\/)[^\/]*@([^\/]+\/.*)/.exec(data.url)
if (authUrl) {
// redirect to same page without authentication.
// hls.js fails otherwise in src/utils/url.js #buildAbsoluteURL()
window.location = window.location.href;
}
});
hls.loadSource("{{ url_for('mediabrowser.m3u8', path=path) }}");
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) {
video.play();
});
hls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
logger.log("fatal network error encountered");
break;
case Hls.ErrorTypes.MEDIA_ERROR:
logger.log("fatal media error encountered");
break;
default:
// cannot recover
hls.destroy();
logger.log([event, data]);
break;
}
}
});
}
</script>
</body>
</html>
|
