Ionic v1 html5 video player screen goes black but audio contiunes

Question

I have an ionic v1 app with an html5 video player that pulls from an 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="{{item.image_2}}" 
           preload="auto" class="theplayios" height="100%" width="100%"
           webkit-playsinline controls>
      <source src="" dynamic-url dynamic-url-src="{{item.hls_stream}}"
              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 are all the parts for the video player

Answer 1

use iframe tag for videos in HTML <iframe></iframe>