-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (99 loc) · 3.65 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
var video = document.querySelector('video');
var assetURL = 'video1-f.mp4';
var mimeCodec = 'video/mp4; codecs="mp4a.40.2"';
var totalSegments = 100;
var segmentLength = 0;
var segmentDuration = 0;
var bytesFetched = 0;
var requestedSegments = [];
var currentSegment = 0;
for (var i = 0; i < totalSegments; ++i) requestedSegments[i] = false;
var mediaSource = null;
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
mediaSource = new MediaSource;
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
var sourceBuffer = null;
function sourceOpen (_) {
sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
getFileLength(assetURL, function (fileLength) {
console.log((fileLength / 1024 / 1024).toFixed(2), 'MB');
//totalLength = fileLength;
segmentLength = Math.round(fileLength / totalSegments);
//console.log(totalLength, segmentLength);
fetchRange(assetURL, 0, segmentLength, appendSegment);
requestedSegments[0] = true;
video.addEventListener('timeupdate', checkBuffer);
video.addEventListener('canplay', function () {
segmentDuration = video.duration / totalSegments;
video.play();
});
video.addEventListener('seeking', seek);
});
};
function getFileLength (url, cb) {
var xhr = new XMLHttpRequest;
xhr.open('head', url);
xhr.onload = function () {
cb(xhr.getResponseHeader('content-length'));
};
xhr.send();
};
function fetchRange (url, start, end, cb) {
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.setRequestHeader('Range', 'bytes=' + start + '-' + end);
xhr.onload = function () {
//var state = [['fetched bytes:', start + '-' + end], ['current segment:', getCurrentSegment()], ['current segment buffered:', currentSegment + 1]];
bytesFetched += end - start + 1;
cb(xhr.response);
currentSegment++;
//console.table(state);
};
xhr.send();
};
function appendSegment (chunk) {
sourceBuffer.appendBuffer(chunk);
};
function checkBuffer (_) {
//var currentSegment = getCurrentSegment();
if (currentSegment === totalSegments) {
console.log('last segment', mediaSource.readyState);
mediaSource.endOfStream();
video.removeEventListener('timeupdate', checkBuffer);
} else if(!requestedSegments[currentSegment]){
//if(currentSegment - getCurrentSegment() < 6){
fetchRange(assetURL, bytesFetched, bytesFetched + segmentLength, appendSegment);
requestedSegments[currentSegment] = true;
//}
}
};
function seek (e) {
console.log(e);
if (mediaSource.readyState === 'open') {
sourceBuffer.abort();
console.log(mediaSource.readyState);
} else {
console.log('seek but not open?');
console.log(mediaSource.readyState);
}
};
function getCurrentSegment () {
return ((video.currentTime / segmentDuration) | 0) + 1;
};
</script>
</body>
</html>