Open Lu-Fi opened 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; }
@Lu-Fi would you be so kind and provide a proper Pull Request?
@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
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.