-
Notifications
You must be signed in to change notification settings - Fork 31
/
example.html
65 lines (48 loc) · 2.09 KB
/
example.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
<!DOCTYPE html>
<html>
<head>
<title>Video.js | Resolution Selector Plugin</title>
<!-- Load Video.js core components -->
<link href="//vjs.zencdn.net/4.5/video-js.css" rel="stylesheet" />
<script src="//vjs.zencdn.net/4.5/video.js"></script>
<!-- Load the plugin -->
<link href="video-quality-selector.css" rel="stylesheet" type="text/css" />
<script src="video-quality-selector.js"></script>
</head>
<body>
<h1>Example Setup</h1>
<!-- This video has no data-setup attribute and needs to be initialized manually -->
<video id="example" class="video-js vjs-default-skin" controls width="640" height="360">
<source src="video-360.mp4" type="video/mp4" data-res="360" />
<source src="video-480.mp4" type="video/mp4" data-res="480" />
</video>
<!-- This video has a data-setup attribute and will be initialized by video.js automatically -->
<video id="example-2" class="video-js vjs-default-skin" controls width="640" height="360" data-setup='{ "plugins" : { "resolutionSelector" : { "default_res" : "480" } } }'>
<source src="video-360.mp4" type="video/mp4" data-res="360" />
<source src="video-480.mp4" type="video/mp4" data-res="480" />
</video>
<script type="text/javascript">
/*
The first video tag does not have a data-setup attribute, so we will initialize
video.js and our plugin here. This technique is well suited for videos that are loaded
dynamically.
The second video tag includes a data-setup attribute and it will be initialized
automatically when video.js loads.
*/
// Initialize video.js and activate the resolution selector plugin
videojs( '#example', { plugins : { resolutionSelector : {
// Pass any options here
default_res : '480'
// Define an on.ready function
} } }, function() {
// "this" will be a reference to the player object
var player = this;
// Listen for the changeRes event
player.on( 'changeRes', function() {
// player.getCurrentRes() can be used to get the currently selected resolution
console.log( 'Current Res is: ' + player.getCurrentRes() );
});
});
</script>
</body>
</html>