AngularJS afficher la vidéo après l'inactivité, masquer la vidéo et réinitialiser au début sur cliquez sur

Question

Je tente de faire une sorte d'économiseur d'écran en utilisant AngularJS. Ce que je voudrais, c'est faire apparaître une vidéo et commencer à jouer après un certain nombre de secondes après que l'utilisateur a cessé d'interagir avec la page (ne bouge pas sa souris ou ne clique pas dessus). Ensuite, une fois la vidéo en cours de lecture, si l'utilisateur clique sur la vidéo, je souhaite que la vidéo soit mise en pause, réinitialisée à 0:00, puis masquée et réinitialisée pour qu'elle s'affiche et commence à jouer après un autre x nombre de secondes d'inactivité.

Je suis très nouveau pour AngularJS, mais voici ce que je suis venu avec jusqu'à ma connaissance de Javascript:

(function(){ 
 
    
 
    var myApp = angular.module('myApp', []); 
 
    
 
    myApp.controller('myController', function($scope, $timeout){ 
 
     
 
     $scope.videoVisible = false; 
 
     
 
     var video = $('#video1')[0]; 
 
     
 
     //5 second delay 
 
     $timeout(function(){ 
 
      $scope.videoVisible = true; 
 
      video.currentTime = 0; 
 
      video.load(); 
 
     }, 5000); 
 

 
     $scope.hideVideo = function() { 
 
      $scope.videoVisible = false; 
 
      video.pause(); 
 
      video.currentTime = 0; 
 
     } 
 
     
 
     // This part should reset the timeout if the user is moving their mouse or clicking 
 
     $(document.body).bind('mousemove keydown click', RESETTIMER); 
 
     
 
    }); 
 
    
 
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="myController"> 
 
     <div ng-show="videoVisible" ng-click="hideVideo()"> 
 
      <video id="video1" style="width:600px;max-width:100%;" controls=""> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
      <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> 
 
      Your browser does not support HTML5 video. 
 
      </video> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

j'avais déjà fait une fonctionnalité similaire pour une autre question SO.

SO Answer

Je modifia en fonction de vos besoins. Fondamentalement, il y a deux fonctions que vous devez modifier.

$scope.pause - qui mettra en pause la vidéo, lorsque l'utilisateur a une activité.

$scope.play - qui jouera la vidéo lorsque l'utilisateur est inactif (pour l'exemple ci-dessous, le temps d'inactivité est réglé sur 5 secondes)

$scope.hide - qui cache le lecteur vidéo lorsque l'utilisateur a cliqué sur le pause vidéo.

La fonction la plus importante est.

monitorTimeout($scope.pause, 1000, 5000); 

Dans la fonction ci-dessus $scope.pause (premier paramètre) définit la fonction à exécuter à chaque itération. Le 1000 (2ème paramètre) indique le nombre de fois que le premier paramètre est exécuté. Le paramètre final indique le délai d'inactivité de l'utilisateur (ici 5 secondes), après quoi $scope.play est exécuté.

Snippet

var myModule = angular.module('myApp', []); 
 
myModule.controller("TextController", function($scope, $interval, $document, $timeout) { 
 

 
    $scope.videoVisible = false; 
 
    var video = $('#video1')[0]; 
 

 
    $scope.hideVideo = function() { 
 
    $scope.videoVisible = false; 
 
    } 
 
    //function to call 
 
    $scope.pause = function() { 
 
    video.pause(); 
 
    video.currentTime = 0; 
 
    console.log("user active"); 
 
    }; 
 

 
    $scope.play = function() { 
 
    $scope.videoVisible = true; 
 
    video.currentTime = 0; 
 
    video.load(); 
 
    video.play(); 
 
    console.log("user inActive"); 
 
    } 
 

 
    //main function 
 
    //functionName - specify the function that needs to be repeated for the intervalTime 
 
    //intervalTime - the value is in milliseconds, the functionName is continuously repeated for this time. 
 
    //timeoutValue - the value is in milliseconds, when this value is exceeded the function given in functionName is stopped 
 

 
    monitorTimeout($scope.pause, 1000, 5000); 
 

 
    function monitorTimeout(functionName, intervalTime, timeoutValue) { 
 
    //initialization parameters 
 
    timeoutValue = timeoutValue || 5000; 
 
    intervalTime = intervalTime || 1000; 
 
    // Start a timeout 
 
    var TimeOut_Thread = $timeout(function() { 
 
     TimerExpired() 
 
    }, timeoutValue); 
 
    var bodyElement = angular.element($document); 
 

 
    /// Keyboard Events 
 
    bodyElement.bind('keydown', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 
    bodyElement.bind('keyup', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 

 
    /// Mouse Events  
 
    bodyElement.bind('click', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 
    bodyElement.bind('mousemove', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 
    bodyElement.bind('DOMMouseScroll', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 
    bodyElement.bind('mousewheel', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 
    bodyElement.bind('mousedown', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 

 
    /// Touch Events 
 
    bodyElement.bind('touchstart', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 
    bodyElement.bind('touchmove', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 

 
    /// Common Events 
 
    bodyElement.bind('scroll', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 
    bodyElement.bind('focus', function(e) { 
 
     TimeOut_Resetter(e) 
 
    }); 
 

 
    function TimerExpired() { 
 
     if (theInterval) { 
 
     $scope.play(); 
 
     $interval.cancel(theInterval); 
 
     theInterval = undefined; 
 
     } 
 
    } 
 

 
    function TimeOut_Resetter(e) { 
 
     if (!theInterval) { 
 
     theInterval = $interval(function() { 
 
      functionName(); 
 
     }.bind(this), intervalTime); 
 
     } 
 

 
     /// Stop the pending timeout 
 
     $timeout.cancel(TimeOut_Thread); 
 

 
     /// Reset the timeout 
 
     TimeOut_Thread = $timeout(function() { 
 
     TimerExpired() 
 
     }, timeoutValue); 
 
    } 
 

 
    var theInterval = $interval(function() { 
 
     functionName(); 
 
    }.bind(this), intervalTime); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="TextController"> 
 
    <div ng-show="videoVisible" ng-click="hideVideo()"> 
 
     <video id="video1" style="width:600px;max-width:100%;" controls=""> 
 
     <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> 
 
     <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. 
 
     </video> 
 
    </div> 
 
    </div> 
 
</div>