forked from cdnbye/hlsjs-p2p-engine
-
Notifications
You must be signed in to change notification settings - Fork 1
/
videojs-demo.html
107 lines (100 loc) · 4.09 KB
/
videojs-demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CDNBye videojs5 demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
#main {
margin: 40px auto;
width: 1000px;
}
</style>
</head>
<link href="http://vjs.zencdn.net/5.19.2/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/5.19.2/video.js"></script>
<!-- increase browser support with MSE polyfill -->
<script src="http://unpkg.com/videojs-contrib-media-sources@4.4.4/dist/videojs-contrib-media-sources.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/cdnbye@latest/dist/videojs-contrib-hlsjs.min.js"></script>
<body>
<div id="main">
<video id="player" class="video-js vjs-default-skin" height="360" width="640" controls preload="none">
<source src="https://video-dev.github.io/streams/x36xhzz/url_2/193039199_mp4_h264_aac_ld_7.m3u8"
type="application/x-mpegURL"/>
</video>
<!--<div style="font-size: 20px; float: right; margin: 10px auto">-->
<p id="info" style="float: left; font-size: 20px; margin: 10px auto"></p>
<button id="button" style="float: right; background-color: cornflowerblue; color: white; font-size: 20px; margin: 10px auto">Simulate A Peer</button>
<!--</div>-->
<table class="table table-hover" style="border: 0; margin: 0">
<thead>
<tr style="text-align: center">
<td width="30" style="margin: 0">sn</td>
<td width="470" style="margin: 0">url</td>
<td width="100">size</td>
<td width="20">source</td>
</tr>
</thead>
</table>
<div class="sr-only cpm-downloadresult" style="height:360px; overflow:auto;">
<!--<p class="help-block">Downloading...</p>-->
<table id="table-body" class="table table-hover">
<tbody ></tbody>
</table>
</div>
</div>
<script>
//view
var cpm = {
downloadresult: document.querySelectorAll('.cpm-downloadresult')[0],
table: document.querySelectorAll('#table-body tbody')[0]
};
var addToTable = function (sn, url, downloaded, source) {
cpm.table.innerHTML +=
`<tr style="text-align: center">
<td>${sn}</td>
<td>${url}</td>
<td>${downloaded} B</td>
<td>${source}</td>
</tr>`
};
//controller
var player = videojs('#player', {
autoplay: true,
html5: {
hlsjsConfig: {
debug: false,
// Other hlsjsConfig options provided by hls.js
p2pConfig: {
logLevel: false,
// Other p2pConfig options provided by CDNBye
}
}
}
});
player.tech_.on(Hls.Events.MANIFEST_LOADED, function (e) {
player.tech_.sourceHandler_.hls.loadLevel = 0;
cpm.downloadresult.classList.remove('sr-only');
});
player.tech_.on(Hls.Events.FRAG_LOADED, function (e, data) {
var frag = data.frag;
var source = undefined;
if (frag.loadByHTTP === true || frag.loadByHTTP === undefined) {
source = 'HTTP';
} else if (frag.loadByP2P === true) {
source = 'P2P';
}
addToTable(frag.sn, frag.relurl, frag.loaded, source);
});
player.tech_.sourceHandler_.hls.engine.on('stats', function ({totalHTTPDownloaded=0, totalP2PDownloaded=0, totalP2PUploaded=0}) {
// console.warn(`totalHTTPDownloaded ${totalHTTPDownloaded} totalP2PDownloaded ${totalP2PDownloaded}`)
var total = totalHTTPDownloaded + totalP2PDownloaded;
document.querySelector('#info').innerText = `p2p ratio: ${Math.round(totalP2PDownloaded/total*100)}%, saved traffic: ${totalP2PDownloaded}KB`;
})
document.getElementById('button').addEventListener('click', function () {
window.open("http://cdnbye.gitee.io/hlsjs-p2p-engine/videojs-demo.html");
})
</script>
</body>
</html>