CODEWITHSUNDEEP
javascriptangularjshtmlhtml5-video
iTech
iTech

Reputation: 97

Play and Pause html5 video on screen click with angular js

I am playing a html5 video in my angular js application. I would like the video to be able to pause and play when the video screen is clicked. I have been able to use a function to either pause or play it and I want to be able to do both depending on whether the video is paused or is playing. I have tried the pausePlay() function but it's not working. My code is shown below:

HTML

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

Function in the controller

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

Upvotes: 2

Views: 2421

Answers (1)

roeiba
roeiba

Reputation: 184

Try the following:

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

You can also show/hide controls:

$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")
    }
};

Upvotes: 2

Related Questions