-
Notifications
You must be signed in to change notification settings - Fork 2
/
demo_hls.html
52 lines (52 loc) · 1.9 KB
/
demo_hls.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LTPlayer Demo</title>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.0/dist/hls.min.js"></script>
<link rel="stylesheet" href="src/player.css">
<script src="src/player.js"></script>
<style>
.ltp-controls-button > svg,
.ltp-controls-volume-icon > svg
{
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
}
</style>
</head>
<body>
<h1>demo</h1>
<video id="player" data-parser-name="player">
<source label="360p" src="https://tube.kuylar.dev/proxy/media/bPTSSHRnnWw/18">
<source label="720p" src="https://tube.kuylar.dev/proxy/media/bPTSSHRnnWw/22">
<track src="https://tube.kuylar.dev/proxy/caption/bPTSSHRnnWw/en" label="English" kind="subtitles">
</video>
<script>
const player = new Player("video", {
author: {
icon: "https://yt3.ggpht.com/ytc/AGIKgqPSpOhHN46JNazhowO36frdU1RoAeigQAFxTworXQ=s176-c-k-c0x00ffffff-no-rj",
title: "Tom Scott",
href: "https://youtube.com/channel/UCBa659QWEk1AI4Tg--mrJ2A"
},
hlsManifest: "https://tube.kuylar.dev/proxy/media/bPTSSHRnnWw.m3u8?useProxy=false",
title: " This tiny hovercraft went viral.",
buttons: {
play: '<svg><use href="feather-sprite.svg#play"/></svg>',
pause: '<svg><use href="feather-sprite.svg#pause"/></svg>',
volumeMute: '<svg><use href="feather-sprite.svg#volume-x"/></svg>',
volumeLow: '<svg><use href="feather-sprite.svg#volume"/></svg>',
volumeMedium: '<svg><use href="feather-sprite.svg#volume-1"/></svg>',
volumeHigh: '<svg><use href="feather-sprite.svg#volume-2"/></svg>',
settings: '<svg><use href="feather-sprite.svg#settings"/></svg>',
fullscreen: '<svg><use href="feather-sprite.svg#maximize"/></svg>',
minimize: '<svg><use href="feather-sprite.svg#minimize"/></svg>'
},
loading: "<img style='width:15%;height:15%;' src='loading.svg'>"
}, "hls.js");
</script>
</body>
</html>