-
Notifications
You must be signed in to change notification settings - Fork 15
/
Copy pathindex7.html
40 lines (36 loc) · 1.64 KB
/
index7.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video.js Quality Selector</title>
<!-- Video.js CSS -->
<link href="https://vjs.zencdn.net/8.0.0/video-js.css" rel="stylesheet">
<!-- jb-videojs-hls-quality-selector CSS -->
<link href="https://unpkg.com/jb-videojs-hls-quality-selector/dist/css/jb-videojs-hls-quality-selector.css" rel="stylesheet">
</head>
<body>
<h3> Using video js 8</h3>
<video id="my-video" class="video-js vjs-default-skin" width="640" height="360" controls>
<source src="https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8" type="application/x-mpegURL">
<!-- <source src="https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd" type="application/dash+xml"> -->
</video>
if you want to use latest video.js check this quality selector, although the quality button are outside the video player <a href="https://v8-8-0--videojs-preview.netlify.app/sandbox/quality-levels">link</a>
<!-- Video.js -->
<script src="https://vjs.zencdn.net/8.0.0/video.js"></script>
<!-- videojs-contrib-quality-levels plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-quality-levels/2.0.15/videojs-contrib-quality-levels.min.js"></script>
<!-- jb-videojs-hls-quality-selector -->
<script src="https://unpkg.com/jb-videojs-hls-quality-selector"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const player = videojs('my-video');
player.ready(function() {
//player.qualityLevels();
player.hlsQualitySelector({
displayCurrentQuality: true,
});
});
});
</script>
</body>
</html>