Back home its always the domestic projects that I sometimes find really fun and challenging to work on for the sheer reason lack of time. Also, you prove to the better half at home that they are important too.
As any kids do, my son spends most of time watching cartoons that are played out of an external flash drive or a laptop that should be connected to play on. Google Chrome seemed to make this job somewhat easy by playing it on your chrome browser and you need not let your flash drive or your laptop hook in physically. I just thought it will be call to play all the videos on the browser and chromecast it. That sounded great until I started to put in the video tag and sdtarted to play it. Unfortunately, I cannot play all the video's, we can play only one at a time and everytime video completes, I have to manually change/open a new file. I thought that's some place I can squeeze in some angular code and go blasting. Of course I do agree that there are a number of other ways you can do it, I tool to do this with Angular and it was easy enough. All that I needed was 2 things
Feel free to explore more on this or add additions to this sample, as always, your suggestions to improve this code is always welcome
As any kids do, my son spends most of time watching cartoons that are played out of an external flash drive or a laptop that should be connected to play on. Google Chrome seemed to make this job somewhat easy by playing it on your chrome browser and you need not let your flash drive or your laptop hook in physically. I just thought it will be call to play all the videos on the browser and chromecast it. That sounded great until I started to put in the video tag and sdtarted to play it. Unfortunately, I cannot play all the video's, we can play only one at a time and everytime video completes, I have to manually change/open a new file. I thought that's some place I can squeeze in some angular code and go blasting. Of course I do agree that there are a number of other ways you can do it, I tool to do this with Angular and it was easy enough. All that I needed was 2 things
videoplayer.html
<!DOCTYPE html>
<html ng-app="videoplayer">
<head>
<script type="text/javascript" src="http://code.angularjs.org/1.2.0/angular.min.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.2.0/angular-route.js"></script>
<script type="text/javascript" src="videoplayercontroller.js"></script>
<title>Check all orders you placed</title>
</head>
<body ng-controller="videoplayercontroller">
<div>
<fieldset>
<legend>List of files to be played</legend>
<ol>
<li ng-repeat='file in mp4Files'> {{ sourceLocation }}{{ file }}</li>
</ol>
</fieldset>
</div>
<h2>{{ heading }}</h2>
<button ng-click="play()" class="button" ng-show="!playing">Play</button>
<button ng-click="pause()" class="button alert" ng-show="playing">Pause</button>
<button ng-click="stop()" class="button alert" ng-show="playing">Stop</button>
<br>
<video name="myvideoplayer" width='320' height='240' id='myvideoplayer'></video>
Playing video: <b>{{ playingFile }} - {{ playing }}</b>
</body>
</html>
videoplayercontroller.js
var app = angular.module('videoplayer', []);
app.controller('videoplayercontroller', ['$scope', function($scope) {
$scope.heading="Play music, all of them at once";
$scope.sourceLocation = './../Music/';
$scope.playingFile = '';
$scope.playing = false;
$scope.mp4Files = ['sample1.mp4', 'sample2.mp4'];
$scope.video = document.getElementById('myvideoplayer');
$scope.video.controls = true;
$scope.currentIndex = 0;
$scope.play = function() {
$scope.playing = true;
$scope.video.src = $scope.sourceLocation + $scope.mp4Files[$scope.currentIndex];
$scope.playingFile = $scope.video.src;
$scope.video.play();
$scope.video.webkitEnterFullscreen();
};
$scope.stop = function() {
$scope.video.pause();
$scope.playing = false;
alert('Stopped');
};
$scope.pause = function() {
$scope.video.pause();
$scope.playing = false;
alert('paused');
};
$scope.video.addEventListener('ended', function() {
$scope.$apply(function() {
$scope.currentIndex++;
if($scope.currentIndex >= $scope.mp4Files.length) {
$scope.currentIndex = 0;
}
$scope.play();
});
});
}]);
Feel free to explore more on this or add additions to this sample, as always, your suggestions to improve this code is always welcome
No comments:
Post a Comment