Riproduci e metti in pausa il video html5 sullo schermo fai clic con angular js - javascript, angularjs, html5, html5-video

Sto riproducendo un video html5 nel mio angular jsapplicazione. Vorrei che il video fosse in grado di mettere in pausa e riprodurre quando si fa clic sullo schermo del video. Sono stato in grado di utilizzare una funzione per mettere in pausa o riprodurlo e voglio essere in grado di fare entrambe a seconda che il video sia in pausa o in riproduzione. Ho provato la funzione pausePlay () ma non funziona. Il mio codice è mostrato di seguito:

HTML

<video style="width:100% !important; height:auto !important;" controls ng-click="video($event)" src="{{feeditem.feed[0].url | trustUrl}}"  type="video/mp4">

Funzione nel controller

$scope.video = function(e) {
var videoElements = angular.element(e.srcElement);
videoElements[0].pause();
}

risposte:

Prova quanto segue:

$scope.pauseOrPlay = function (ele) {
var video = angular.element(ele.srcElement)[0];
if (video.paused) {
video.play();
} else {
video.pause();
}
};

Puoi anche mostrare / nascondere i controlli:

$scope.pauseOrPlay = function (ele) {
var video = angular.element(ele.srcElement)[0];
if (video.paused) {
video.play();
video.controls="controls";
video.setAttribute("controls","controls")
} else {
video.pause();
video.removeAttribute("controls")
}
};