$("head").append("").hide().show(0);
$("head").append("").hide().show(0);
$("head").append("").hide().show(0);
$("head").append("").hide().show(0);
$("head").append("").hide().show(0);
$("head").append("").hide().show(0);
$(document).ready(function() {
// load google tag data
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments);}
gtag('js', new Date());
window.draggingList = false;
gtag('config', 'G-ZMDJMNVFHZ');
var disabled = false;
var defaultPausetime = '600';var pausetime = defaultPausetime;var autostart = false;
console.log('Autoplay is OFF');var video_classes = '';video_classes += ' vjs-fluid';
var camera = window.camera = new Array();
camera['num'] = '1'; //The number of the camera
camera['uid'] = '988e7f551959aa722058';
camera['vuid'] = 'video_988e7f551959aa722058';
camera['name'] = 'wildcat3';
camera['typeid'] = '2';
camera['image'] = 'https://live9.brownrice.com/cam-images/wildcat3.jpg';
camera['banner'] = '';
camera['logo'] = '';
camera['logo2'] = "";
camera['logo3'] = "";
camera['bannerLink'] = "";
camera['link'] = "https://hosting.brownrice.com/web-camera-software";
camera['link2'] = "https://hosting.brownrice.com/web-camera-software";
camera['roomforcontrols'] = 'false';
camera['ptzControls'] = 'true';
camera['muted'] = 'false';
camera['hide_audio_controls'] = 'false';
camera['width'] = '';
camera['height'] = '';
camera['aspect_w'] = "0";
camera['aspect_h'] = "0";
camera['allowed_urls'] = "";
camera['embedoptions'] = "";
camera['showingTimelapses'] = false;
camera['isLive'] = true;
camera["loadingTimelapse"] = false;
camera["listingTimelapses"] = true;
camera["hideCtrl"] = false;
camera['nvr_enabled'] = "0";
// match for parent URL for later use
var parentUrl;
parentUrl = document.referrer;
console.log("Parent URL: " + parentUrl);
if (parentUrl == "") {
parentUrl = parent.location.host;
console.log("Parent URL 2nd try: " + parentUrl);
}
// allowed embed URLs
camera['allowed_urls'] = "";
// set the offline bit
camera["offline"] = "";
// check allowed URLs
if (camera['allowed_urls'] != '' && parentUrl != '') {
console.log('Processing allowed URLs:' + camera['allowed_urls']);
var allowed_urls = new RegExp(camera['allowed_urls'] + "|brownrice|google");
var restrict = true;
var allowed = allowed_urls.test(parentUrl);
console.log('URL allowed: ' + allowed);
} else {
var restrict = false;
}
camera['servername'] = "live9.brownrice.com";
camera['streamurl'] = "https://6555b9ac80a95.streamlock.net:444";
console.log('PTZ area: ' + camera['roomforcontrols']);
console.log('Player server: live3.brownrice.com');
console.log('Streaming server: ' + camera['servername']);
// load correct stream url
if (camera['typeid'] == '20') {
// transcoded url
var url_rtsp = camera["url_rtsp"] = "" + camera['streamurl'] + "/" + camera['name'] + "/" + camera['name'] + ".stream_360p/playlist.m3u8";
} else if (camera['typeid'] == '5') {
// radio stream
var url_rtsp = camera["url_rtsp"] = "" + camera['streamurl'] + "/" + camera['name'] + "/" + camera['name'] + ".stream_aac/playlist.m3u8";
} else {
// normal rtsp url
var url_rtsp = camera["url_rtsp"] = "" + camera['streamurl'] + "/" + camera['name'] + "/" + camera['name'] + ".stream/playlist.m3u8";
}
// preload background image
camera['poster'] = camera['image'];
console.log('Poster image: ' + camera['poster']);
// demensions of PTZ area controller
if (camera['roomforcontrols'] == 'true') {
var video_height = $(document).height()-120;
} else {
var video_height = $(document).height();
}
var video_width = $(document).width();
$("#bri_cam_" + camera['num']).after("");
$("#cam_embed_" + camera['uid']).hide();
if (camera['width'] != "" || camera['height'] != "") {
$("#cam_embed_" + camera['uid']).wrap("");
} else {
$("#cam_embed_" + camera['uid']).wrap("");
}
// if camera has unusual aspect ratios we'll set them in the embed code
// with the aspect_r var
if (camera['aspect_w'] != '0' && camera['aspect_h'] != '0') {
var aspect_r = "data-setup='{\"aspectRatio\": \""+camera['aspect_w']+"\:"+camera['aspect_h']+"\"}'";
} else {
var aspect_r = '';
}
if (camera.offline == "offline" && !camera.loadingTimelapse) {
// build this is schedled downtime remove all controls and stop auto start
// if scheduled offline time remove controls and remove autostart
$("#cam_embed_" + camera['uid']).append("");
} else if (disabled == true) {
console.log("Disabled: " + disabled)
// if user clicked cancel on password button then we display this
$("#cam_embed_" + camera['uid']).append("");
} else if (restrict == false || allowed == true) {
// if this is a URL that is allowed to play the video build the full player
if (camera.loadingTimelapse) {
// loading directly into a timelapse
$("#cam_embed_" + camera['uid']).append("
");
$(".vjs-vidsource-live").show();
} else {
// loading live player
$("#cam_embed_" + camera['uid']).append("
");
}
} else {
// not allowed to embed pop-up
alert("This web site is not allowed to embed this webcam. Please see https://www.brownrice.com for further information.");
}
// Camera controls
if (!camera.hideCtrl) {
$("#cam_embed_" + camera['uid']).append("
");
// read cookie function
function getCookie(w) {
cName = "";
pCOOKIES = new Array();
pCOOKIES = document.cookie.split('; ');
for (bb = 0; bb < pCOOKIES.length; bb++) {
NmeVal = new Array();
NmeVal = pCOOKIES[bb].split('=');
if (NmeVal[0] == w) {
cName = unescape(NmeVal[1]);
}
}
return cName;
}
// set cookie if not found
var cameracookie;
// retrieve cookie
cameracookie = getCookie('cameracookie');
if (cameracookie === '') {
// generate random string
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for ( var i=0; i < 8; i++ ) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
// set the cookie name and cookie value
document.cookie="cameracookie=" + text;
// and set the var to pass to our next script since the cookie just got set
cameracookie = text;
}
// location of bri camera control server-side script
var control_script = "https://player.brownrice.com/cam-control/camera-controller.php?camera=" + camera['name'] + "&servername=" + camera['servername'] + "&myDiv=cam_embed_" + camera['uid'] + "&myHeight=" + video_height + "&myWidth=" + video_width + "&myLogo2=" + camera['logo3'] + "&camerasession=" + cameracookie + "&rev=20240726";
if (camera['roomforcontrols'] == 'true') {
var loaded = false;
// if playing, then we'll show the controller
var checkPlayStatus = setInterval(function() {
// console.log('Is paused? ' + player.paused());
if (!player.paused() && camera.isLive) {
// load up the PTZ room for controls area
if (!loaded) {
$.getScript(control_script, function() {
// success
// console.log(control_script);
// set loaded bit
loaded = true;
});
}
$("#control-container-cam_embed_" + camera['uid']).fadeIn('slow');
} else {
// video is no longer playing, so we'll hide the controller
$("#control-container-cam_embed_" + camera['uid']).fadeOut('slow');
// kill control sesssion, too
if (loaded && chkCtlInterval) {
killSession(true);
setTimeout(function() {
// kill the control session again in five seconds, just to be sure it goes away
killSession();
}, 5000);
}
}
}, 2000);
}
// End Camera controls table ------------------------------------------------
}
(function(window, videojs) {
let playerOptions = {
// inactivityTimeout: 0, // don't hide control-bar; for development
// inactivityTimeout: 500, // hide after half-a-second
controlBar: {},
userActions: {},
plugins: {}
};
if (true || !camera['servername'].match(/^streamer/)) {
// not on streamer servers so load chromecast stuff
console.log("loading chromecast");
playerOptions.techOrder = [ 'chromecast', 'html5' ];
playerOptions.plugins.chromecast = {}
}
if (camera['roomforcontrols'] == 'true' && camera['ptzControls'] == 'true') {
playerOptions.userActions.click = false;
}
// hide all audio controls
if (camera['hide_audio_controls'] == 'true') {
playerOptions.muted = true; // mute by default if they're hiding audio controls
playerOptions.controlBar.volumePanel = false;
} else if (camera['muted'] == 'true') {
// mute audio by default
playerOptions.muted = true;
}
// manually set camera-offline message
videojs.addLanguage('en', {"The media could not be loaded, either because the server or network failed or because the format is not supported.": "The webcam that you are attempting to view appears to be offline. Please contact the owner of this camera and let them know about the issue."});
// initialize player
var player = window.player = videojs(camera['vuid'], playerOptions);
// add BRI logo with link to brownrice.com
var briButton = player.controlBar.addChild('button', {}, 9);
var briButtonDom = briButton.el();
briButtonDom.innerHTML = '';
briButton.controlText("Hosted by Brownrice Internet"); // set hover-text
briButton.addClass("vjs-bri-button");
if (camera.listingTimelapses) {
// create timelapse button
var timelapseButton = player.controlBar.addChild('button', {}, 9);
var timelapseButtonDom = timelapseButton.el();
timelapseButtonDom.innerHTML = 'Timelapses';
timelapseButton.controlText("View Timelapses"); // set hover-text
timelapseButtonDom.onclick = function () { toggleTimelapses(); }; // add onclick for button
timelapseButton.addClass("vjs-timelapse-button");
}
if (!camera.offline) {
// create live button (only shows if the video-source has been switched to non-live)
var liveButton = player.controlBar.addChild('button', {}, 9);
var liveButtonDom = liveButton.el();
liveButtonDom.innerHTML = 'Live';
liveButton.controlText("View Live Video"); // set hover-text
liveButtonDom.onclick = function (event) { playTimelapse($(".vjs-vidsource-live")[0], camera["url_rtsp"], camera["poster"], "", true); }; // add onclick for button
liveButton.addClass("vjs-live-button");
if (!camera.loadingTimelapse) {
$(".vjs-live-button").hide(); // hide button to switch back to live
}
}
// demo dropdown button with css classes already setup:
// // create playback-speed button
// var playbackButton = player.controlBar.addChild('button', {}, 9);
// var playbackButtonDom = playbackButton.el();
// playbackButtonDom.innerHTML = '';
// playbackButton.controlText("Playback Speed"); // set hover-text
// playbackButton.addClass("vjs-playback-button");
// $(".vjs-playback-button").hide(); // hide button to switch back to live
// pass camera name for easier reference
var stream_name = camera['name'];
// this fires every second or so while the video is playing.
// functions send google analytics events
var playing = 99;
player.on('timeupdate', function(e) {
playing++;
if (playing == 1) {
// video has been loaded but play button not yet pressed
console.log((camera.isLive ? 'Video' : 'Timelapse') + ' loaded ' + stream_name);
// fire google tag event
if (camera.isLive) {
gtag('event', `${stream_name}_video_loaded`, {
"camera_name": stream_name
});
} else {
gtag('event', `${stream_name}_timelapse_loaded`, {
"camera_name": stream_name
});
}
} else if (playing > 1 && playing <= 2) {
// video was played for at least one second
var watchedseconds = player.currentTime();
console.log((camera.isLive ? 'Video ' : 'Timelapse ') + stream_name + ' played at least ' + watchedseconds + 'seconds');
// fire google tag event
if (camera.isLive) {
gtag('event', `${stream_name}_video_played`, {
"camera_name": stream_name
});
} else {
gtag('event', `${stream_name}_timelapse_played`, {
"camera_name": stream_name
});
}
}
});
// reset GA loop count when new video is loaded
player.on('loadedmetadata', function() {
playing = 0;
});
var isAutoplayEnabled = player.autoplay();
// Initialize a flag to track the first interaction
var firstTouch = true;
// Function to toggle play/pause
function togglePlayback() {
if (player.paused()) {
player.play();
} else {
player.pause();
}
}
// Listening for touch events (for mobile devices)
player.on('touchmove', function(event) {
window.draggingList = true;
});
player.on('touchend', function(event) {
// Prevent any additional default action
event.preventDefault();
if (window.draggingList) {
window.draggingList = false;
} else {
// Check if the touch event target is part of the player's control bar, a logo/banner link, or the timelapse list is shown
if (player.controlBar.el().contains(event.target) || $(event.target).hasClass("logolink") || $("#timelapse-overlay").is(":visible")) {
// if the control bar was tapped or timelapse list is visible, pass through as a click event
event.target.click();
} else {
// tap not in control bar and timelapse list is hidden, play or pause video
if (!isAutoplayEnabled && firstTouch) {
// Skip the first touch interaction for playback
firstTouch = false;
} else {
// Handle play/pause on subsequent touches
togglePlayback();
}
}
}
});
player.on('pause', function() {
// Modify the style to show the big play button when the video is paused
if (!player.ended()) {
player.bigPlayButton.el().style.display = 'block';
}
});
player.on('play', function() {
// Hide the big play button when the video is playing
player.bigPlayButton.el().style.display = 'none';
toggleTimelapses("hide");
});
player.on('ended', function() {
// Make sure the button shows up when the video ends
player.bigPlayButton.el().style.display = 'block';
});
if (camera['nvr_enabled'] == 1) {
console.log('nvr enabled')
// Override the default duration display update
var durationDisplay = player.controlBar.durationDisplay;
var durationDisplayContent = durationDisplay.contentEl();
// Select the elements with the classes `vjs-progress-control` and `vjs-seek-to-live-control`
var progressControl = document.querySelector('.vjs-progress-control');
var seekToLiveControl = document.querySelector('.vjs-seek-to-live-control');
var liveControl = document.querySelector('.vjs-live-control');
var mouseControl = document.querySelector('.vjs-mouse-display');
var mouseControlWhenClicking = document.querySelector('.vjs-progress-holder');
// Check if the elements exist and change their display style
if (progressControl) {
progressControl.style.display = 'flex';
}
if (seekToLiveControl) {
seekToLiveControl.style.display = 'block';
}
if (liveControl) {
liveControl.style.display = 'none';
}
// Function to update the duration display
function updateDurationDisplay() {
var seekable = player.seekable();
if (seekable && seekable.length > 0) {
var nvrWindowLength = seekable.end(0) - seekable.start(0);
var displayTime = Math.round(nvrWindowLength); // rounded to nearest second
var minutes = Math.floor(displayTime / 60);
var seconds = displayTime % 60;
durationDisplayContent.textContent = minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
}
}
// Update duration display on relevant events
player.on('timeupdate', updateDurationDisplay);
player.on('loadedmetadata', updateDurationDisplay);
var maxNvrLength = 3600; // Maximum DVR length in seconds, e.g., 60 minutes
player.on('timeupdate', function() {
var seekable = this.seekable();
if (seekable.length > 0) {
var nvrLength = seekable.end(0) - seekable.start(0);
if (nvrLength > maxNvrLength) {
var allowedStart = seekable.end(0) - maxNvrLength;
}
}
});
}
console.log('Timeout set to: ' + pausetime + ' seconds.');
if (pausetime > 0) {
// Adjust pausetime based on seekable length
if (camera['nvr_enabled'] == 1) {
player.on('loadedmetadata', function(e) {
if (camera.isLive && player.liveTracker.seekableEnd() > 0) {
pausetime = (Number(defaultPausetime) + player.liveTracker.seekableEnd());
console.log('Adjusted Pausetime with DVR window: ' + pausetime);
}
});
}
// player timeout function
player.on('timeupdate', function(e) {
if (player.currentTime() >= pausetime && window.camera.isLive) {
console.log('Timeout exceeded, pausing video');
player.pause();
pausetime = pausetime * 2;
console.log('Current Pausetime (doubled): '+ pausetime);
}
});
}
player.overlay({
overlays: [
{
align: "top",
content: "
Timelapses
Live
Daily 03/25/2025
Daily 03/24/2025
Weekly 03/24/2025
Daily 03/23/2025
Daily 03/22/2025
Daily 03/21/2025
Daily 03/20/2025
Daily 03/19/2025
",
start: 'showTimelapses',
end: 'hideTimelapses'
},
]
});
// do not display ads to android users
var isAndroid = /android/i.test(navigator.userAgent.toLowerCase());
if (isAndroid == false) {
// add google tag events for clicked logos
$( "#link_1_" + camera['uid']).click(function() {
var url_value = $(this).attr("href");
console.log( "Logo1 clicked and user sent to "+ url_value );
gtag('event', `${stream_name}_logo1_click`, {
"destination_url": url_value
});
});
$( "#link_2_" + camera['uid']).click(function() {
var url_value = $(this).attr("href");
console.log( "Logo2 clicked and user sent to "+ url_value );
gtag('event', `${stream_name}_logo2_click`, {
"destination_url": url_value
});
});
}
if (camera.listingTimelapses) {
// open timelapses box when timelapse ends
player.on('ended', function(e) {
if (!camera.isLive) {
toggleTimelapses("show");
}
});
}
})(window, window.videojs);
$(".video-js").css("height", "100%").css("width", "100%");
$("#cam_embed_" + camera['uid']).css("height", "100%").css("max-height", "100%").css("max-width", "100%");
$("#" + camera['vuid']).css("max-height", "100%").css("max-width", "100%").css("display", "block");
if (typeof center !== 'undefined') {
$("#cam_embed_" + camera['uid']).children("div").first().css("margin", "0 auto");
$("#cam_embed_" + camera['uid']).css("margin", "0 auto").css("display", "inline");
}
$("#cam_embed_" + camera['uid']).show();
$("body").css("margin", "0px");
if (camera.listingTimelapses && disabled == false && (restrict == false || allowed == true)) {
// display control bar even if camera is offline so timelapses can still be played
$(".vjs-control-bar").attr("style", "display: flex !important;");
}
$(".thumbnail-icon").click(function (event) {
event.stopPropagation();
});
});
// toggle the timelapses overlay
function toggleTimelapses(hideShow = "") {
if (hideShow !== "show" && (window.camera['showingTimelapses'] || hideShow == "hide")) {
window.camera['showingTimelapses'] = false;
player.trigger('hideTimelapses');
// $(".vjs-overlay-top").show();
} else {
// now set timelapse overlay to showable (so it doesn't flash as visible on pageload)
$(".vjs-vidsource-banner").css("display", "inline");
if (!window.camera.offline) {
if (camera["isLive"]) {
$(".vjs-vidsource-live").hide();
} else {
$(".vjs-vidsource-live").show();
}
}
window.camera['showingTimelapses'] = true;
// $(".vjs-overlay-top").hide();
player.trigger('showTimelapses');
}
}
function playTimelapse(element, stream_url, poster_url, filename = "", live = false) {
toggleTimelapses("hide");
if (!live) {
window.camera["isLive"] = false;
if (!window.camera.offline) {
$(".vjs-live-button").show(); // show button to switch back to live
}
} else {
window.camera["isLive"] = true;
if (!window.camera.offline) {
$(".vjs-live-button").hide(); // hide button to switch back to live
}
}
$(".vjs-vidsource-container").removeClass("vjs-vidsource-current");
if (element) {
element.classList.add("vjs-vidsource-current");
}
playVideoSrc(stream_url, poster_url);
return false;
}
function playVideoSrc(stream_url, poster_url) {
player.src({type: "application/x-mpegURL", src: stream_url});
player.poster(poster_url);
if (!window.camera.isLive) {
player.currentTime(0);
}
player.play();
}
function copyEmbedLink(element) {
navigator.clipboard.writeText(element.href).then(() => {
let originalColor = $(element).parent().css("background-color");
$(element).parent().animate({backgroundColor: "rgba(46, 139, 87, 0.4)"}, "fast", () => {
setTimeout(() => {
$(element).parent().animate({backgroundColor: originalColor}, "slow");
}, 1000);
});
});
return false;
}
';
briButton.controlText("Hosted by Brownrice Internet"); // set hover-text
briButton.addClass("vjs-bri-button");
if (camera.listingTimelapses) {
// create timelapse button
var timelapseButton = player.controlBar.addChild('button', {}, 9);
var timelapseButtonDom = timelapseButton.el();
timelapseButtonDom.innerHTML = 'Timelapses';
timelapseButton.controlText("View Timelapses"); // set hover-text
timelapseButtonDom.onclick = function () { toggleTimelapses(); }; // add onclick for button
timelapseButton.addClass("vjs-timelapse-button");
}
if (!camera.offline) {
// create live button (only shows if the video-source has been switched to non-live)
var liveButton = player.controlBar.addChild('button', {}, 9);
var liveButtonDom = liveButton.el();
liveButtonDom.innerHTML = 'Live';
liveButton.controlText("View Live Video"); // set hover-text
liveButtonDom.onclick = function (event) { playTimelapse($(".vjs-vidsource-live")[0], camera["url_rtsp"], camera["poster"], "", true); }; // add onclick for button
liveButton.addClass("vjs-live-button");
if (!camera.loadingTimelapse) {
$(".vjs-live-button").hide(); // hide button to switch back to live
}
}
// demo dropdown button with css classes already setup:
// // create playback-speed button
// var playbackButton = player.controlBar.addChild('button', {}, 9);
// var playbackButtonDom = playbackButton.el();
// playbackButtonDom.innerHTML = '';
// playbackButton.controlText("Playback Speed"); // set hover-text
// playbackButton.addClass("vjs-playback-button");
// $(".vjs-playback-button").hide(); // hide button to switch back to live
// pass camera name for easier reference
var stream_name = camera['name'];
// this fires every second or so while the video is playing.
// functions send google analytics events
var playing = 99;
player.on('timeupdate', function(e) {
playing++;
if (playing == 1) {
// video has been loaded but play button not yet pressed
console.log((camera.isLive ? 'Video' : 'Timelapse') + ' loaded ' + stream_name);
// fire google tag event
if (camera.isLive) {
gtag('event', `${stream_name}_video_loaded`, {
"camera_name": stream_name
});
} else {
gtag('event', `${stream_name}_timelapse_loaded`, {
"camera_name": stream_name
});
}
} else if (playing > 1 && playing <= 2) {
// video was played for at least one second
var watchedseconds = player.currentTime();
console.log((camera.isLive ? 'Video ' : 'Timelapse ') + stream_name + ' played at least ' + watchedseconds + 'seconds');
// fire google tag event
if (camera.isLive) {
gtag('event', `${stream_name}_video_played`, {
"camera_name": stream_name
});
} else {
gtag('event', `${stream_name}_timelapse_played`, {
"camera_name": stream_name
});
}
}
});
// reset GA loop count when new video is loaded
player.on('loadedmetadata', function() {
playing = 0;
});
var isAutoplayEnabled = player.autoplay();
// Initialize a flag to track the first interaction
var firstTouch = true;
// Function to toggle play/pause
function togglePlayback() {
if (player.paused()) {
player.play();
} else {
player.pause();
}
}
// Listening for touch events (for mobile devices)
player.on('touchmove', function(event) {
window.draggingList = true;
});
player.on('touchend', function(event) {
// Prevent any additional default action
event.preventDefault();
if (window.draggingList) {
window.draggingList = false;
} else {
// Check if the touch event target is part of the player's control bar, a logo/banner link, or the timelapse list is shown
if (player.controlBar.el().contains(event.target) || $(event.target).hasClass("logolink") || $("#timelapse-overlay").is(":visible")) {
// if the control bar was tapped or timelapse list is visible, pass through as a click event
event.target.click();
} else {
// tap not in control bar and timelapse list is hidden, play or pause video
if (!isAutoplayEnabled && firstTouch) {
// Skip the first touch interaction for playback
firstTouch = false;
} else {
// Handle play/pause on subsequent touches
togglePlayback();
}
}
}
});
player.on('pause', function() {
// Modify the style to show the big play button when the video is paused
if (!player.ended()) {
player.bigPlayButton.el().style.display = 'block';
}
});
player.on('play', function() {
// Hide the big play button when the video is playing
player.bigPlayButton.el().style.display = 'none';
toggleTimelapses("hide");
});
player.on('ended', function() {
// Make sure the button shows up when the video ends
player.bigPlayButton.el().style.display = 'block';
});
if (camera['nvr_enabled'] == 1) {
console.log('nvr enabled')
// Override the default duration display update
var durationDisplay = player.controlBar.durationDisplay;
var durationDisplayContent = durationDisplay.contentEl();
// Select the elements with the classes `vjs-progress-control` and `vjs-seek-to-live-control`
var progressControl = document.querySelector('.vjs-progress-control');
var seekToLiveControl = document.querySelector('.vjs-seek-to-live-control');
var liveControl = document.querySelector('.vjs-live-control');
var mouseControl = document.querySelector('.vjs-mouse-display');
var mouseControlWhenClicking = document.querySelector('.vjs-progress-holder');
// Check if the elements exist and change their display style
if (progressControl) {
progressControl.style.display = 'flex';
}
if (seekToLiveControl) {
seekToLiveControl.style.display = 'block';
}
if (liveControl) {
liveControl.style.display = 'none';
}
// Function to update the duration display
function updateDurationDisplay() {
var seekable = player.seekable();
if (seekable && seekable.length > 0) {
var nvrWindowLength = seekable.end(0) - seekable.start(0);
var displayTime = Math.round(nvrWindowLength); // rounded to nearest second
var minutes = Math.floor(displayTime / 60);
var seconds = displayTime % 60;
durationDisplayContent.textContent = minutes + ':' + (seconds < 10 ? '0' + seconds : seconds);
}
}
// Update duration display on relevant events
player.on('timeupdate', updateDurationDisplay);
player.on('loadedmetadata', updateDurationDisplay);
var maxNvrLength = 3600; // Maximum DVR length in seconds, e.g., 60 minutes
player.on('timeupdate', function() {
var seekable = this.seekable();
if (seekable.length > 0) {
var nvrLength = seekable.end(0) - seekable.start(0);
if (nvrLength > maxNvrLength) {
var allowedStart = seekable.end(0) - maxNvrLength;
}
}
});
}
console.log('Timeout set to: ' + pausetime + ' seconds.');
if (pausetime > 0) {
// Adjust pausetime based on seekable length
if (camera['nvr_enabled'] == 1) {
player.on('loadedmetadata', function(e) {
if (camera.isLive && player.liveTracker.seekableEnd() > 0) {
pausetime = (Number(defaultPausetime) + player.liveTracker.seekableEnd());
console.log('Adjusted Pausetime with DVR window: ' + pausetime);
}
});
}
// player timeout function
player.on('timeupdate', function(e) {
if (player.currentTime() >= pausetime && window.camera.isLive) {
console.log('Timeout exceeded, pausing video');
player.pause();
pausetime = pausetime * 2;
console.log('Current Pausetime (doubled): '+ pausetime);
}
});
}
player.overlay({
overlays: [
{
align: "top",
content: " 
