Update README

This commit is contained in:
Laura Hausmann 2022-02-06 04:38:06 +01:00
parent 30228bb4a4
commit 81e48040ee
Signed by: zotan
GPG Key ID: D044E84C5BE01605
1 changed files with 72 additions and 22 deletions

View File

@ -49,6 +49,7 @@ rtmp {
hls on;
hls_path /mnt/ssd_data/hls/src;
hls_continuous off;
hls_fragment 1s;
hls_fragment_naming system;
hls_playlist_length 60s;
@ -113,35 +114,84 @@ WantedBy=multi-user.target
### VideoJS Player example code
```
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet" />
<style>
html,
body {
margin: 0;
padding: 0;
}
</style>
<div>
<video id='hls-player' class="video-js vjs-default-skin vjs-big-play-centered" controls>
<source type="application/x-mpegURL" src="https://cdn.chaos.stream/hls/<?php echo $_GET["profile"]."/".$_GET["stream"]; ?>.m3u8">
</video>
</div>
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<script>
var player = videojs('hls-player', {liveui: true});
player.fill(true);
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link href="/lib/video-js.min.css" rel="stylesheet" />
<title>Player - chaos.stream</title>
<style>
html, body, #wrapper {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="wrapper">
<video id='hls-player' class="video-js vjs-default-skin vjs-big-play-centered" controls autoplay>
<source type="application/x-mpegURL">
</video>
</div>
<script src="/lib/video.min.js"></script>
<script>
document.querySelector('source').src = 'https://cdn.chaos.stream/hls/src/' + window.location.pathname.substring(1) + '.m3u8';
document.getElementById("hls-player").addEventListener("error",function(event){
console.log('HTML5 video error, reloading page in 10sec');
setTimeout(function () { location.reload(true); }, 10000);
});
var player = videojs('hls-player', {
liveui: true,
html5: {
vhs: {
blacklistDuration: Infinity,
maxPlaylistRetries: 5,
experimentalBufferBasedABR: true,
},
},
});
player.ready(function() {
let player = this
player.on("error", function(){
console.log('VJS Error. Treating as offline.');
player.poster('https://live.on.chaos.stream/lib/offline.png');
player.errorDisplay.hide();
});
player.on("ended", function(){
console.log('Stream ended. Redirecting to profile.');
document.location = 'https://chaos.stream/profile/' + window.location.pathname.substring(1);
});
});
player.fill(true);
</script>
</body>
</html>
```
### accompanying nginx config for VideoJS Player
```
location ~ ^/(.+)/(.+)$ {
rewrite ^/(.+)/(.+)$ /watch.php?stream=$1&profile=$2 last;
location = /favicon.ico {
#ignore rewrite rules
}
location ~ ^/(.+)$ {
rewrite ^/(.+)$ /watch.php?stream=$1&profile=src last;
location ^~ /lib/ {
#ignore rewrite rules
}
location = /watch.html {
#ignore rewrite rules
}
location / {
rewrite / /watch.html last;
}
```