hi i have a list of urls in that one is video link i need to display each url for particular time each for 30 seconds i doing this using $time out function every thing is working fine except playing video.
the code for the controller given below
.controller('PlaylistCtrl', ['$scope', '$stateParams','$ionicPopup','$http','$interval','$sce','$templateCache','$ionicHistory','$timeout','Base64','$ionicPlatform',function($scope, $stateParams,$ionicPopup,$http,$interval,$sce,$templateCache,$ionicHistory,$timeout,Base64,$ionicPlatform) {
var sequencecount=[];
sequencecount=0;
var hostname='http://url.com/';
var seqlist= JSON.parse(window.localStorage['slist'] || '{}');
var time=[];
//playvideo('test');
playslide(sequencecount);
function playslide(sequence){
alert(sequence);
var data=seqlist[sequence];
var mediaurl=data['Url'];
var url=hostname+data['Url']+'='+'?Date='+(new Date()).getTime();
if(mediaurl.indexOf('media')==-1){
playslideimage(url);
}
else{
playvideo(url);
}
sequencecount++;
$timeout(function() {
var data=seqlist[sequencecount];
time=data['time'];
playslide(sequencecount);
alert(time);
}, time*1000);
}
function playslideimage(url){
window.cache.clear( $scope.frameurl );
window.cache.clear( $scope.videourl );
$scope.vid=false;
$scope.fram=true;
$scope.videohight=0;
$scope.iframeHeight = window.innerHeight;
$scope.frameurl = $sce.trustAsResourceUrl(url);
}
function playvideo(url){
window.cache.clear( $scope.frameurl );
window.cache.clear( $scope.videourl );
$scope.vid=true;
$scope.fram=false;
$scope.iframeHeight = 0;
$scope.videohight=window.innerHeight;;
$scope.videourl= $sce.trustAsResourceUrl('http://.mp4?autoplay');
var video = document.getElementById('video');
video.play();
}
}])
this id the html
<body>
<div>
<video id="video" autobuffer height="{{videohight}}" width="100%">
<source src="{{videourl}}" type="video/mp4">
</video>
</div>
<iframe id="myFrame" width="100%" data-ng-src="{{frameurl}}" height={{iframeHeight}}></iframe>
</body>
To autoplay a video in HTML5 add autoplay to the <video> tag. So in your case:
<video id="video" autobuffer height="{{videohight}}" width="100%" autoplay>
Directive can be used for this as below ,
<Vid auto="true"/>
<Vid auto="false"/>
.directive("Vid",function(){
return {
restrict : 'E',
scope :{
auto :'@'
}
link:function(scope,ele,attrs) {
var ele = angular.element(ele)[0];
if(scope.auto)
ele.autoplay = true; // or ele.play();
else
ele.autoplay = false;
}
}
})