JSFiddle - React, Tailwind, and code Playground

by saianirudhster

HTML

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

</body>

CSS

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

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

.autoplayClass {}

JavaScript

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

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

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

    }
  }

}