AngularJS: Video disable autoplay and preload not working -
note: strictly angular solutions please. no jquery. default video controls not work our scenario.
scenario: click play button, load , play video. should not preload video unless button clicked.
but, both preloading , autoplaying without button click. 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.
here solution few assumptions :
jsfiddle 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. needed play button on player
2. video controls hidden
3. play button should hidden on click
Comments
Post a Comment