Feat: When hovering over an event's thumbs, play the event using HLS. by IgorA100 · Pull Request #4839 · ZoneMinder/zoneminder

IgorA100 · 2026-05-16T22:20:14Z

If there is an index.m3u8 manifest file for the recorded event, we first attempt playback using HLS.
If playback using HLS does not start within 2 seconds, we attempt playback using MP4.
If the recorded event is longer than 1 minute and there's a problem with HLS, don't try to play it as MP4, but immediately switch to MJPEG playback.
Display the player type during playback (for both Live and recorded events) and the end of playback (for recorded events).
Fixed assigning the value of read cookies to stream.muted.
If errors occur, output them to the console.
Use video.autoplay = false instead of true, and then use video.play().then(_ => {. This will allow for more correct handling of promises and a repeat playback attempt if muted=false is an issue.

… there is an index.m3u8 file. (events.php)

IgorA100 · 2026-05-20T20:36:03Z

Copilot

Pull request overview

This PR enhances thumbnail hover previews for recorded events by attempting HLS playback first (when an index.m3u8 manifest is available), with fallbacks to MP4 and then MJPEG, while also displaying the active player type/status during playback.

Changes:

Add HLS-based playback on event thumbnail hover with fallback logic (HLS → MP4 (short events) → MJPEG) and status display updates.
Extend event list AJAX responses to include HLS source URLs and event duration metadata.
Update Event::getStreamSrc() to route mode=mp4hls to a dedicated view_hls endpoint.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
web/skins/classic/js/skin.js	Adds hover playback orchestration for HLS/MP4/MJPEG and injects player-status info into the overlay UI.
web/includes/Event.php	Adjusts stream URL generation to support `mp4hls` via `view_hls`.
web/ajax/events.php	Adds `data-video-hls-src` and duration attributes for thumbnails, enabling HLS-first hover playback decisions.

Comments suppressed due to low confidence (3)

web/skins/classic/js/skin.js:1506

getCookie('zmWatchMuted') is a string, so !!getCookie(...) will incorrectly mute when the cookie is 'false'. This breaks the user setting for RTSP2Web thumbnails; use an explicit string comparison instead of boolean coercion.

    const video = document.createElement('video');
    video.removeAttribute('controls');
    video.style.cssText = 'width: 100%; height: 100%;';
    video.autoplay = true;
    video.muted = !!getCookie('zmWatchMuted');
    video.playsInline = true;

web/skins/classic/js/skin.js:1608

The HLS hover player sets video.muted = !!getCookie('zmWatchMuted'), but the cookie value is 'true'/'false' (string). !!'false' is true, so hover playback will always be muted whenever the cookie exists. Use an explicit comparison to 'true' or preserve the prior !== 'false' behavior.

    video.style.cssText = 'width: 100%; height: 100%;';
    video.autoplay = false;
    video.muted = !!getCookie('zmWatchMuted');
    video.playsInline = true;
    container.appendChild(video);

web/skins/classic/js/skin.js:1692

The MP4 fallback player uses video.muted = !!getCookie('zmWatchMuted'), which treats the cookie string 'false' as truthy and forces muting. Use explicit string-to-boolean handling for this cookie value.

  const video = document.createElement('video');
  const previewRate = getPreviewRate();
  video.src = src;
  video.autoplay = true;
  video.muted = !!getCookie('zmWatchMuted');
  video.playsInline = true;
  video.playbackRate = previewRate;

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

web/skins/classic/js/skin.js:1522

Hls.Events.ERROR callbacks receive (event, data), but this handler only declares a single parameter and logs it; that will log the event name and lose the useful data payload (type/details/fatal), making debugging harder. Update the handler signature to accept both parameters and log data (or at least data.details/type/fatal).

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(hlsUrl);
      hls.attachMedia(video);
      hls.on(Hls.Events.ERROR, function(e) {
        console.error(e);
        hls.destroy();
        video.remove();
        fallbackToMjpeg();
      });

…valid, the return status code is 204 instead of 404. (view_hls.php) This will avoid errors in the browser console and PHP logs.

….m3u8" manifest file, even if the physical file is missing. (events.php) This will reduce the load on the file system.

…server response status and load the manifest only if the response status is 200. (skin.js) This will avoid unnecessary errors.

…atusBar. (skin.js) Also: When executing createVideoElement(), autoplay is always false, and after the video is created, we now start playback via thumbnailVideoPlay().

IgorA100 · 2026-05-21T17:00:08Z

Ready for re-checking

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

- When executing Event->Length() , get the duration of the recorded event file if the duration in the database table is 0 - If native HLS playback fails in Safari, we first try playing MP4, and only if MP4 playback fails do we switch to MJPEG playback

IgorA100 · 2026-05-31T13:28:49Z

@connortechnology
I've made the necessary corrections and comments.
Please recheck.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

IgorA100 · 2026-05-31T20:32:01Z

@connortechnology
Please recheck.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

And wait for connectedCallback() to create the internal <video> tag and only then assign the play handler to the <video> tag.

IgorA100 · 2026-06-04T11:48:52Z

@connortechnology
Please recheck.

Copilot

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.

    const stream = document.createElement('video-stream');
    stream.style.cssText = 'width: 100%; height: 100%; display: block;';
    stream.background = true;
-    stream.muted = getCookie('zmWatchMuted') !== 'false';
+    stream.muted = getCookie('zmWatchMuted') === 'true';
    stream.src = url.href;


+function checkM3u8File(hlsUrl) {
+  if (!hlsUrl || currentView === 'frames') return false;
+
+  try {
+    const xhr = new XMLHttpRequest();
+    xhr.open("GET", hlsUrl, false);
+    xhr.send();
+    return (xhr.readyState === 4 && xhr.status === 200);


+  let video = null;
+  const videoSrc = img.getAttribute('video_src');
+  if (videoSrc && currentView !== 'frames' && img.dataset.videoDurationSecs < 60) {
+    const eventStart = img.dataset.eventStart;


+if ($m3u8_content_check === false) {
+  header('HTTP/1.1 204 No Content');
+  header('Cache-Control: no-cache');
+  ZM\Debug('HLS manifest ' . $m3u8_path .' has not available yet');


  public function Length(){
-    if(! isset($this->{'Length'})){
-      //TODO: Do something when no Length found
+    $duration = 0;
+    if ( !isset($this->{'Length'}) || (float)$this->{'Length'} <= 0 ) {
+      $files = glob($this->Path().'{/incomplete.*,/'.$this->{'Id'}.'-video.*}', GLOB_NOSORT | GLOB_BRACE);
+      if (count($files) > 0) {


IgorA100 added 4 commits May 17, 2026 01:19

Add a link to playback the recorded event using HLS to the IMG tag if…

2d17883

… there is an index.m3u8 file. (events.php)

Option to generate 'view=view_hls' (Event.php)

1678c13

Merge branch 'master' into patch-180448

123d624

Added the "data-video-duration-secs" attribute to VIDEO (events.php)

c794364

IgorA100 changed the title ~~When hovering over an event's thumbs, play the event using HLS.~~ Feat: When hovering over an event's thumbs, play the event using HLS. May 20, 2026

IgorA100 added 2 commits May 20, 2026 23:22

Added support for HLS playback when hovering over the thumbs.(skin.js)

b47b7f8

Fix: ESLint (skin.js)

e24c275

IgorA100 marked this pull request as ready for review May 20, 2026 20:34

connortechnology requested a review from Copilot May 21, 2026 03:00

Copilot started reviewing on behalf of connortechnology May 21, 2026 03:00 View session

Copilot AI reviewed May 21, 2026

View reviewed changes

Comment thread web/skins/classic/js/skin.js Outdated

Comment thread web/skins/classic/js/skin.js Outdated

Comment thread web/skins/classic/js/skin.js

Comment thread web/includes/Event.php Outdated

Comment thread web/ajax/events.php Outdated

IgorA100 marked this pull request as draft May 21, 2026 07:24

IgorA100 added 3 commits May 21, 2026 13:17

Fixed the value assignment for "$args['view']" (Event.php)

16f350c

Fixed cookie reading and video launch for native HLS. (skin.js)

558262a

Removed extra semicolons (skin.js)

97689cf

IgorA100 marked this pull request as ready for review May 21, 2026 10:31

connortechnology requested a review from Copilot May 21, 2026 11:09

Copilot started reviewing on behalf of connortechnology May 21, 2026 11:09 View session

Copilot AI reviewed May 21, 2026

View reviewed changes

Comment thread web/skins/classic/js/skin.js

Comment thread web/skins/classic/js/skin.js

IgorA100 marked this pull request as draft May 21, 2026 15:17

IgorA100 added 5 commits May 21, 2026 18:53

If the "index.m3u8" manifest file is missing or if the manifest is in…

af60118

…valid, the return status code is 204 instead of 404. (view_hls.php) This will avoid errors in the browser console and PHP logs.

The "data-video-hls-src" attribute should always reference the "index…

c4417c8

….m3u8" manifest file, even if the physical file is missing. (events.php) This will reduce the load on the file system.

Before loading the "index.m3u8" manifest in hls.js, always check the …

dee2d49

…server response status and load the manifest only if the response status is 200. (skin.js) This will avoid unnecessary errors.

Before raising statusBar.innerHTML, we check for the presence of a st…

e8b1871

…atusBar. (skin.js) Also: When executing createVideoElement(), autoplay is always false, and after the video is created, we now start playback via thumbnailVideoPlay().

Picky ESLint (skin.js)

14e128b

IgorA100 marked this pull request as ready for review May 21, 2026 16:59

connortechnology requested a review from Copilot May 22, 2026 01:05

Copilot started reviewing on behalf of connortechnology May 22, 2026 01:05 View session

connortechnology requested a review from Copilot May 30, 2026 18:00

Copilot started reviewing on behalf of connortechnology May 30, 2026 18:00 View session

Copilot AI reviewed May 30, 2026

View reviewed changes

Comment thread web/skins/classic/js/skin.js

Comment thread web/ajax/watch.php Outdated

Comment thread web/skins/classic/js/skin.js

Comment thread web/includes/Event.php Outdated

IgorA100 marked this pull request as draft May 30, 2026 19:28

IgorA100 and others added 2 commits May 31, 2026 14:44

Merge branch 'master' into patch-180448

70cfbbf

IgorA100 marked this pull request as ready for review May 31, 2026 13:28

connortechnology requested a review from Copilot May 31, 2026 16:44

Copilot started reviewing on behalf of connortechnology May 31, 2026 16:44 View session

Copilot AI reviewed May 31, 2026

View reviewed changes

Comment thread web/skins/classic/js/skin.js

Comment thread web/skins/classic/js/skin.js Outdated

IgorA100 marked this pull request as draft May 31, 2026 19:04

Update skin.js

21f1282

IgorA100 marked this pull request as ready for review May 31, 2026 20:32

Merge branch 'master' into patch-180448

cb24200

connortechnology requested a review from Copilot June 4, 2026 02:42

Copilot started reviewing on behalf of connortechnology June 4, 2026 02:43 View session

Copilot AI reviewed Jun 4, 2026

View reviewed changes

Comment thread web/skins/classic/js/skin.js

Comment thread web/skins/classic/js/skin.js Outdated

Comment thread web/views/view_hls.php Outdated

Comment thread web/includes/Event.php

Merge branch 'master' into patch-180448

2bbb80b

IgorA100 marked this pull request as draft June 4, 2026 07:23

IgorA100 added 4 commits June 4, 2026 14:29

Do not execute checkM3u8File() for live viewing. (skin.js)

e7b8163

And wait for connectedCallback() to create the internal <video> tag and only then assign the play handler to the <video> tag.

Remove extra space (skin.js)

a9c152d

Check the response of file_get_contents() for "false" (view_hls.php)

c73463a

Deleted the unnecessary line (Event.php)

f3ac936

IgorA100 marked this pull request as ready for review June 4, 2026 11:48

connortechnology requested a review from Copilot June 5, 2026 00:29

Copilot started reviewing on behalf of connortechnology June 5, 2026 00:29 View session

Copilot AI reviewed Jun 5, 2026

View reviewed changes

Uh oh!

Conversation

IgorA100 commented May 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

IgorA100 commented May 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

IgorA100 commented May 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

IgorA100 commented May 31, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

IgorA100 commented May 31, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

IgorA100 commented Jun 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

IgorA100 commented May 16, 2026 •

edited

Loading