-
Notifications
You must be signed in to change notification settings - Fork 224
/
hls-js-player.js
102 lines (84 loc) · 2.82 KB
/
hls-js-player.js
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
var remoteVideo = null;
function loadPlayerPage() {
$("#playerPage").load("../hls-player/player-page.html", initPage );
}
function initPage() {
$("#header").text("HLS.JS Player Minimal");
$("#urlServer").val(getHLSUrl());
$("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
remoteVideo = document.getElementById('remoteVideo');
remoteVideo.style ="background-color: lightgrey;";
}
function playBtnClick() {
if (validateForm()) {
var streamName = $('#playStream').val();
streamName = encodeURIComponent(streamName);
var videoSrc = $("#urlServer").val() + '/' + streamName + '/' + streamName + '.m3u8';
var key = $('#key').val();
var token = $("#token").val();
if (key.length > 0 && token.length > 0) {
videoSrc += "?" + key + "=" + token;
}
if (Hls.isSupported()) {
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(remoteVideo);
hls.on(Hls.Events.MANIFEST_PARSED, function() {
console.log("Play with HLS.js");
remoteVideo.play();
onStarted();
});
}
else {
$("#notifyFlash").text("Your browser doesn't support MSE technology required to play video");
}
}
}
function stopBtnClick() {
if (remoteVideo != null) {
console.log("Stop HTML5 player");
remoteVideo.pause();
remoteVideo.currentTime = 0;
remoteVideo.removeAttribute('src');
remoteVideo.load();
}
onStopped();
}
function onStarted() {
$("#urlServer").prop('disabled', true);
$("#playStream").prop('disabled', true);
$("#key").prop('disabled', true);
$("#token").prop('disabled', true);
$("#player").prop('disabled', true);
$("#applyBtn").prop('disabled', false).text("Stop").off('click').click(stopBtnClick);
}
function onStopped() {
$("#urlServer").prop('disabled', false);
$("#playStream").prop('disabled', false);
$("#key").prop('disabled', false);
$("#token").prop('disabled', false);
$("#player").prop('disabled', false);
$("#applyBtn").prop('disabled', false).text("Play").off('click').click(playBtnClick);
}
function validateForm() {
var valid = true;
if (!$("#urlServer").val().length) {
highlightInput($("#urlServer"));
valid = false;
} else {
removeHighlight($("#urlServer"));
}
if (!$("#playStream").val().length) {
highlightInput($("#playStream"));
valid = false;
} else {
removeHighlight($("#playStream"));
}
return valid;
}
function highlightInput(input) {
input.closest('.form-group').addClass("has-error");
}
function removeHighlight(input) {
input.closest('.form-group').removeClass("has-error");
}