CODEWITHSUNDEEP
angularjsvideo
neelima
neelima

Reputation: 74

AngularJS: Video disable autoplay and preload not working

NOTE: Strictly Angular solutions please. No jquery. Default video controls will not work for our scenario.

Scenario: Click a play button, then LOAD and PLAY the video. Should not preload the video unless a button is clicked.

But, it is both preloading and autoplaying without button click. What am I missing in fiddle?

HTML

<div ng-app ng-controller="videoCtrl">
 <video preload="preload" autoplay="autoplay">
    <source src="http://www.w3schools.com/html/mov_bbb.mp4">
  </video>
  <button ng-click="playVideo($event)">PLAY</button>
</div>

ANGULAR

function videoCtrl($scope) {
    $scope.autoplay = false;
  $scope.preload = "none";

  $scope.playVideo = function () {
    console.log("hello");
    $scope.autoplay = true;
    $scope.preload = "auto";
  }
}

CSS

div {
  position:relative;
  width:300px;
  height:150px;
}
button {
  position:absolute;
  top:50px;
  left:120px;

}

https://jsfiddle.net/nkarri/nd9utkbp/1/

Thanks in Advance.

Upvotes: 0

Views: 1187

Answers (1)

saianirudh
saianirudh

Reputation: 104

Here is the solution with few assumptions :
JSFiddle With Solution
HTML

<body ng-app="videoApp">
        <div ng-controller="videoCtrl">
          <video id="videoID" preload="preload">
            <source src="http://www.w3schools.com/html/mov_bbb.mp4">
          </video>
        <button play-video > PLAY
        </button>
       </div>
    </body>

Javascript

var myapp = angular.module('videoApp', []);
myapp.controller('videoCtrl', videoCtrl);

function videoCtrl($scope) {
 $scope.hideplay=true; 
  $scope.preload = "none";
}
myapp.directive('playVideo', playVideo);

function playVideo() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.bind('click', function() {
       element.css('display','none');
        var videoElements = angular.element(document.getElementById('videoID'));
        videoElements[0].play();
      });

    }
  }

}

CSS

div {
  position: relative;
  width: 300px;
  height: 150px;
}

button {
  position: absolute;
  top: 50px;
  padding:6px;
  left: 120px;
}

Assumptions:
1. You needed a play button on player
2. Video controls are hidden
3. Play Button should be hidden on click

Upvotes: 1

Related Questions