javascript - AngularJS 在不活动后显示视频，隐藏视频并重置为点击开始

Question

我正在尝试使用 AngularJS 制作一种屏幕保护程序。我想要的是在用户停止与页面交互(不移动鼠标或单击)后指定的秒数后弹出视频并开始播放。然后一旦视频正在播放，如果用户点击视频，我希望视频暂停，重置为 0:00，然后隐藏并重置不活动计时器，以便它在另一 x 秒后显示并开始播放不活动。

我是 AngularJS 的新手，但根据我对 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

我已经为另一个 SO 问题做了类似的功能。

SO Answer

我已经根据您的要求进行了修改。基本上有两个函数需要修改。

$scope.pause - 当用户有任何事件时将暂停视频。

$scope.play - 当用户不活动时播放视频(对于下面的示例，不活动时间设置为 5 秒)

$scope.hide - 当用户点击暂停的视频时隐藏视频播放器。

最重要的功能是。

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

在上面的函数中，$scope.pause(第一个参数)定义了将在每次迭代中运行的函数。 1000(第二个参数)表示第一个参数运行的次数。最后一个参数表示用户不活动的超时时间(此处为 5 秒)，之后运行 $scope.play。

片段

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>