Using Custom JavaScript
Custom JavaScript for Public Pages
AzuraCast provides you with the possibility to add custom JS via the Custom Branding
page at /admin/branding
.
There you can add your own JavaScripts to the public pages with the editor for Custom JS for Public Pages
.
You can attach to events of the public player like this:
$(document).on('now-playing', function(np_new) { // custom code with np_new});
Example: Video Playback for Public Page
You can use Custom JS for Public Pages
to add a video element to the page and style via the Custom CSS for Public Pages
using our example below.
Custom CSS for Public Pages
[data-theme] body.page-minimal .background-video { width: 100vw; height: 100vh; object-fit: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1;}
Custom JS for Public Pages
let videoBackgroundElement = document.createElement('video');videoBackgroundElement.autoplay = true;videoBackgroundElement.loop = true;videoBackgroundElement.muted = true;videoBackgroundElement.poster = 'Enter.URL.Here';videoBackgroundElement.className = 'background-video';
let videoBackgroundSource = document.createElement('source');videoBackgroundSource.src = 'Enter.URL.Here';videoBackgroundSource.type = 'video/mp4';
videoBackgroundElement.appendChild(videoBackgroundSource);
document.body.append(videoBackgroundElement);