motioneye-project / motioneye

A web frontend for the motion daemon.
GNU General Public License v3.0
3.87k stars 650 forks source link

FeatureRequest Video SpeedPlay #1116

Open Lu-Fi opened 5 years ago

Lu-Fi commented 5 years ago

Hi, is it possible to add a fast play Mode for Videos ? Here is an Example, but your CodingStyle is much cleaner than mine ;-) This Sample add's an additional play button for 4x Video Playback and autoplay next Video.

--- ./motioneye/motioneye/static/js/main.js 2019-01-13 15:04:45.948929550 +0100
+++ /usr/local/lib/python2.7/dist-packages/motioneye/static/js/main.js  2019-01-13 15:02:39.836642438 +0100
@@ -3461,7 +3461,7 @@
     var img = $('<img class="picture-dialog-content">');
     content.append(img);

-    var video_container = $('<video class="picture-dialog-content" controls="true">');
+    var video_container = $('<video id="motionPlayer" class="picture-dialog-content" controls="true">');
     var video_loader = $('<img>');
     video_container.on('error', function(err) {
         var msg = '';
@@ -3492,6 +3492,9 @@
     var prevArrow = $('<div class="picture-dialog-prev-arrow button mouse-effect" title="previous picture"></div>');
     content.append(prevArrow);

+    var timelapseButton = $('<div class="picture-dialog-timelapse button mouse-effect" title="fast"></div>');
+    content.append(timelapseButton);
+
     var playButton = $('<div class="picture-dialog-play button mouse-effect" title="play"></div>');
     content.append(playButton);

@@ -3510,8 +3513,11 @@
         var width = parseInt(windowWidth * widthCoef);
         var height = parseInt(windowHeight * heightCoef);

+        var timeLapse = 0;
+
         prevArrow.css('display', 'none');
         nextArrow.css('display', 'none');
+        timelapseButton.hide();

         var playable = video_container.get(0).canPlayType(entry.mimeType) != ''
         playButton.hide();
@@ -3525,18 +3531,36 @@

         if (playable) {
             video_loader.attr('src', addAuthParams('GET', basePath + mediaType + '/' + entry.cameraId + '/playback' + entry.path));
+            timelapseButton.on('click', function() {
+               timelapse = 1; 
+               playButton.click();
+               video_container.on('ended', function() {
+                  if( pos > 0 ) {
+                     nextArrow.click();
+                     playButton.click();
+                  }
+               });
+            });
             playButton.on('click', function() {
                 video_container.attr('src', addAuthParams('GET', basePath + mediaType + '/' + entry.cameraId + '/playback' + entry.path));
                 video_container.show();
                 video_container.get(0).load();  /* Must call load() after changing <video> source */
                 img.hide();
                 playButton.hide();
+                timelapseButton.hide();
                 video_container.on('canplay', function() {
                    video_container.get(0).play();  /* Automatically play the video once the browser is ready */
                 });
+                if( timelapse == 1 ) {
+                   document.getElementById('motionPlayer').playbackRate = 4;
+                };
             });

             playButton.show();
+            timelapseButton.show();
+
+            playButton.css('left', '55%');
+            timelapseButton.css('left', '45%');
         }

         img.load(function () {
--- ./motioneye/motioneye/static/css/main.css   2019-01-13 15:04:45.932929513 +0100
+++ /usr/local/lib/python2.7/dist-packages/motioneye/static/css/main.css    2019-01-13 14:39:50.442474185 +0100
@@ -768,7 +768,8 @@
 div.picture-dialog-prev-arrow,
 div.picture-dialog-next-arrow,
 div.picture-dialog-play,
-div.picture-dialog-progress {
+div.picture-dialog-progress,
+div.picture-dialog-timelapse {
     position: absolute;
     top: 50%;
     margin-top: -1.5em;
@@ -792,6 +793,13 @@
     background-image: url(../img/camera-top-buttons.svg);
     background-position: -300% 0px;
     left: 50%;
+    margin-left: -1.5em;
+}
+
+div.picture-dialog-timelapse {
+    background-image: url(../img/camera-top-buttons.svg);
+    background-position: -300% 0px;
+    left: 50%;
     margin-left: -1.5em;
 }
ccrisan commented 5 years ago

@Lu-Fi would you be so kind and provide a proper Pull Request?

hasselk commented 5 years ago

@Lu-Fi maybe yout two should work together, there is a pull request which adds this but if i seen well no gui buttons just keyboard

Add playback speed controls and autoplay next file