62 lines
2.5 KiB
HTML
62 lines
2.5 KiB
HTML
<html>
|
|
<head>
|
|
<title>OP25 Live</title>
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|
<script src="http://localhost:8081/hls.js"></script>
|
|
<script>
|
|
var videoSrc = 'http://localhost:8081/live.m3u8';
|
|
var hls;
|
|
|
|
function onload1() {
|
|
attach_hls();
|
|
}
|
|
function attach_hls() {
|
|
var video = document.getElementById('video');
|
|
document.getElementById('div1').innerHTML = 'Initialization state 1<br>';
|
|
if (Hls.isSupported()) {
|
|
document.getElementById('div1').innerHTML = 'Initialization state 1a<br>';
|
|
hls = new Hls();
|
|
hls.loadSource(videoSrc);
|
|
hls.attachMedia(video);
|
|
document.getElementById('div1').innerHTML = 'Initialization state 1b<br>';
|
|
hls.on(Hls.Events.MANIFEST_PARSED, function() {
|
|
document.getElementById('div1').innerHTML = 'Initialization state 1c<br>';
|
|
video.play();
|
|
document.getElementById('div1').innerHTML = 'Initialization state 1d: load completed OK<br>';
|
|
});
|
|
}
|
|
// hls.js is not supported on platforms that do not have Media Source
|
|
// Extensions (MSE) enabled.
|
|
//
|
|
// When the browser has built-in HLS support (check using `canPlayType`),
|
|
// we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video
|
|
// element through the `src` property. This is using the built-in support
|
|
// of the plain video element, without using hls.js.
|
|
//
|
|
// Note: it would be more normal to wait on the 'canplay' event below however
|
|
// on Safari (where you are most likely to find built-in HLS support) the
|
|
// video.src URL must be on the user-driven white-list before a 'canplay'
|
|
// event will be emitted; the last video event that can be reliably
|
|
// listened-for when the URL is not on the white-list is 'loadedmetadata'.
|
|
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
|
|
document.getElementById('div1').innerHTML = 'Initialization state 2<br>';
|
|
video.src = videoSrc;
|
|
video.addEventListener('loadedmetadata', function() {
|
|
document.getElementById('div1').innerHTML = 'Initialization state 2a<br>';
|
|
video.play();
|
|
document.getElementById('div1').innerHTML = 'Initialization state 2b: load completed OK<br>';
|
|
});
|
|
} else {
|
|
document.getElementById('div1').innerHTML = 'Unable to initialize HLS: failed to detect and enable media source or mp4 support<br>';
|
|
}
|
|
} // end of attach_hls()
|
|
</script>
|
|
</head>
|
|
<body onload="javascript:onload1();">
|
|
<video id="video" controls height=600 width=800></video>
|
|
<br>
|
|
<hr>
|
|
<div id="div1">Initialization state 0<br></div>
|
|
</body>
|
|
</html>
|