本文介绍了HTML5视频API:如果启用了循环,则无法在最后一帧暂停的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如果视频位于最后一帧,则尝试在最后一帧暂停视频似乎不起作用。

Trying to pause a video on the very last frame appears to not work if the video is on the very last frame.

var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {

})

app.directive('someVideo', function ($window, $timeout) {
    return {
    	  controller: function($scope) {
        
        },
        link: function (scope, elm) {
            scope.videoPlayer = elm[0];
            scope.keyDownEvent = keyDownEvent;
            scope.currentTime = 0;
            scope.videoPlayer.loop = true;
            
            angular.element($window).bind('keydown',scope.keyDownEvent);
            
            function keyDownEvent(e){
            console.log(e.keyCode);
              	switch(e.keyCode) {
                    case 32: //space
                    	scope.videoPlayer.loop = !scope.videoPlayer.loop;
                    	console.log('spcae: ',scope.videoPlayer.loop);
                      break;
	              	  case 38: //up
	  			            scope.videoPlayer.currentTime = 0;
                      console.log('up: ', scope.videoPlayer.currentTime);
											break;
                		case 40: //down
                      scope.videoPlayer.pause();
											scope.videoPlayer.currentTime = scope.videoPlayer.duration;
                      console.log('down: ', scope.videoPlayer.currentTime);
											break;
              	}
            }
        }
    }
})
body {
  overflow: hidden;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div ng-app="myApp">
    <div ng-controller="MainCtrl">
        <video some-video src="http://nagi.ca/u/google.mp4" autoplay></video>
    </div>
</div>

重播步骤:

1)启动小提琴并点击视频设置焦点

2)使用键:space = toggle loop,down =最后一帧,上涨=第一帧

STEPS TO REPO:
1) launch the fiddle and click the video to set focus
2) use keys: space = toggle loop, down = last frame, up = first frame

结果:

启用循环:视频暂停,跳转到最后一帧,然后跳到第一帧

禁用循环:视频暂停,跳转到最后一帧(我想要的结果

推荐答案

更改此

scope.videoPlayer.currentTime = scope.videoPlayer.duration;

到此

scope.videoPlayer.currentTime = scope.videoPlayer.duration - 1;

JSFiddle:

这篇关于HTML5视频API:如果启用了循环,则无法在最后一帧暂停的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-12 00:30