Ionic v1 html5 video player screen goes black but audio contiunes

I have a ionic v1 app with a html5 video player that pulls from a api, but when i play my app for about 2-3 minutes the screen goes black but the audio continues to play this only occurs on android how do i fix this?

Html:

 <div ng-repeat="item in allvods">
    <video ng-show="item.id == vodid" poster="" preload="auto" class="theplayios" height="100%" width="100%" webkit-playsinline controls>
      <source src="" dynamic-url dynamic-url-src="" type="application/x-mpegURL">
    </video>
  </div>

Controller:

.controller('playvodCtrl', function($scope, $localStorage, $rootScope, $ionicPopup, $state, $stateParams, $http) {
   $scope.apiusername = 'enyigba';
    $scope.apipassword = 'cbc443cd9a3899f0b3f5c14682ae3fa1';
    $scope.vodid = $stateParams.vidId;
    $scope.vidtitle = $stateParams.vidtitle;
    $scope.catid = $stateParams.catId;
                if(typeof analytics !== undefined) { analytics.trackView("Playing Vod: " + $scope.vidtitle); }

$scope.initEvent = function() {
    if(typeof analytics !== undefined) { analytics.trackEvent("Vod", "Action", "Label", 25); }
}
    $http.get('http://tvstartup.biz/mng-channel/vpanel/api/vodplaylistsion.php?user=' + $scope.apiusername + '&pass=' + $scope.apipassword + '&id=' + $scope.catid).success(function(data) {
        $scope.allvods = data.videos;
    });
}) 

app.js

.directive('dynamicUrl', function () {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attr) {
            element.attr('src', attr.dynamicUrlSrc);
        }
    };
})

above is all the parts for the video player

from Ionic v1 html5 video player screen goes black but audio contiunes