Bluemedia/nginx-live
1
0
Fork 0
mirror of https://github.com/BluemediaGER/nginx-live.git synced 2024-11-22 17:55:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use vanilla Clappr instead of voc-player

Browse source
This commit is contained in:
Oliver Traber 2021-07-31 00:44:42 +02:00
parent 80202deb89
commit 65e5982ea2
Signed by: Bluemedia
GPG key ID: C7BA47275B086E2C
4 changed files with 26 additions and 1154 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -44,7 +44,7 @@ If you want to make the web player and the HLS files available via HTTPS, you ca
## Built with ## Built with
- [NGINX](https://www.nginx.com/) High Performance Load Balancer, Web Server, & Reverse Proxy - [NGINX](https://www.nginx.com/) High Performance Load Balancer, Web Server, & Reverse Proxy
- [nginx-rtmp-module](https://github.com/arut/nginx-rtmp-module) NGINX-based Media Streaming Server - [nginx-rtmp-module](https://github.com/arut/nginx-rtmp-module) NGINX-based Media Streaming Server
- [voc-player](https://github.com/voc/voc-player) HTML5 Stream Player for MPEG-DASH and HLS - [Clappr](https://github.com/clappr/clappr) Extensible media player for the web
## Project structure / Directories ## Project structure / Directories
- `config/` NGINX config files with various placeholders which will be replaced by the entrypoint script. - `config/` NGINX config files with various placeholders which will be replaced by the entrypoint script.

1144
frontend/assets/js/player.js
View file

File diff suppressed because one or more lines are too long

0
frontend/assets/css/style.css → frontend/assets/style.css
View file

32
frontend/index.html
View file

@ -4,7 +4,12 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Livestream</title> <title>Livestream</title>
<link rel="icon" href="assets/favicon.ico"> <link rel="icon" href="assets/favicon.ico">
<link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/style.css">
<script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/clappr/dist/clappr.min.js"></script>
<script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/clappr-stats/dist/clappr-stats.min.js"></script>
<script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/clappr-nerd-stats/dist/clappr-nerd-stats.min.js"></script>
<script type="text/javascript" crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/clappr-pip-plugin/dist/clappr-pip-plugin.js"></script>
</head>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
@ -14,23 +19,34 @@
<div id="player"></div> <div id="player"></div>
</div> </div>
</body> </body>
<script src="assets/js/player.js"></script>
<script> <script>
// expose Clappr to load additional plugins new Clappr.Player({
window.Clappr = window.VOCPlayer
</script>
<script>
new VOCPlayer.Player({
//** Standard clappr.io Options ** //** Standard clappr.io Options **
// Use custom source // Use custom source
sources: ["hls/live.m3u8"], sources: ["hls/live.m3u8"],
// Plugins
plugins: [ClapprNerdStats, ClapprStats, ClapprPIPPlugin],
clapprNerdStats: {
iconPosition: 'none'
},
// Disable m3u8 preload to prevent error on page load
hlsPlayback: {
preload: false
},
// Set a custom poster // Set a custom poster
poster: "assets/backdrop.jpg", poster: "assets/backdrop.jpg",
// Assign parent by id // Assign parent by id
parentId: "#player" parentId: "#player",
// Set dimensions and media control delay
height: "100%",
width: "100%",
hideMediaControlDelay: 1000
}) })
</script> </script>
</html> </html>