ngSimplevideo is an angularjs implementation of simplevideo.
- Download from above
- Clone:
git clone https://github.com/brimanning/ngsimplevideo.git - Coming:
bower install ngsimplevideo
ngSimplevideo provides a directive that will convert a simplevideo element or element with a simplevideo attribute into a video element or Flash fallback where required.
You'll need to reference jQuery, simplevideo, angular, and ngSimplevideo on your page:
<head>
<script src="jquery.js"></script>
<script src="simplevideo.js"></script>
<script src="angular.js"></script>
<script src="ng-simplevideo.js"></script>
</head>
You'll now be able to add simplevideo elements on the page normally and ngSimplevideo will populate them with a simplevideo element.
<simplevideo src="mgVideoPath.mp4"></simplevideo>
You can also control the video player itself and listen to it's properties using the following method:
<simplevideo
src="videoSrc"
control-object="controlObject"
>
</simplevideo>
<button ng-click="controlObject.play()">Play</button>
<button ng-click="controlObject.pause()">Pause</button>
<button ng-click="controlObject.setCurrentTime(5)">Go Five Seconds In</button>
<button ng-click="controlObject.setVolume(0)">Mute</button>
<button ng-click="controlObject.setVolume(1)">Unmute</button>
Is paused: {{ controlObject.isPaused() }}
<script>
angular.module('ngSimpleVideo').controller('SampleController',
['$scope',
function($scope) {
$scope.videoSrc = 'bower_components/simplevideo/color-run.mp4';
$scope.controlObject = {};
}
]);
</script>
The attributes you can specify for a simplevideo object are:
src- default: none, the video element url (will use a source specified in the HTML if omitted, otherwise simplevideo will use this value)autoplay- default: false, if the video should start playing once it's loaded (will use the value specified in the HTML if omitted, otherwise simplevideo will use this value)poster- default: none, what image the video should show before it's started playing (note: no poster is available if the browser falls back to Flash) (will use the value specified in the HTML if omitted, otherwise simplevideo will use this value)controls- default: false, if the browser's default controls should be displayed (note: no controls are available if the browser falls back to Flash) (will use the value specified in the HTML if omitted, otherwise simplevideo will use this value)loop- default: false, if the video should restart playing once it's finished (will use the value specified in the HTML if omitted, otherwise simplevideo will use this value)on-play- default: none, a function executed when the video starts playingon-pause- default: none, a function executed when the video is pausedon-ended- default: reset current time to 0, a function executed when the video endson-playing- default: none, a function executed while the video is playingon-playing-interval- default: 30, how many milliseconds between each execution ofonPlayingswfobject-url- default: 'swfobject.js', where the swfobject library should be loaded from (only loaded when necessary)swf-url- default: 'simplevideo.swf', where the simplevideo Flash fallback should be loaded fromplayer-product-install-swf-url- default: 'playerProductInstall.swf', where the update Flash swf should be loaded from
In addition, there are a few methods you can access via the externalControls object mentioned above:
getCurrentTime()- returns the current time of the video in secondssetCurrentTime(secondsOrPercentage)- sets the current time of the video in seconds or a percent in the form of a string'50%'to go halfway through a videogetDuration()- returns the duration of the video in secondsgetVolume()- returns the volume of the video elementsetVolume(zeroToOneOrPercentage)- sets the volume of the video element from 0 to 1 or a percent in the form of a string'50%'to put the volume halfway upplay()- play the video from it's current location (triggers theonPlaycallback)pause()- pause the video (triggers theonPausecallback)
Brian Manning
Code and documentation copyright 2014 Brian Manning. Code released under the MIT license.