Memory leak with videos on iOS

ionic-v1
1

Hi fellows,

I am having problems with the inline video playback of my ionic app in iOS. The expected video playback works in general, but after having viewed/played about 12 pages/videos while quickly navigating between the pages, the playback stops to work. Instead of the video a black area is shown with a crossed out play button on it.

image
2-Template-with-Video.png750×1334 448 KB

What I know about the problem so far:

  • The playback also stops to work for videos which used to play before (so I assume its not wrong paths which lead to this issue)
  • It is always the same template which contains the video (so I assume that the code itself works)
  • If I restart the app as soon as the issue appears, video playback works
  • While testing with ionic serve, the issue does not appear
  • While testing with ionic run ios on the emulator, the issue does not appear
  • While testing on the device, the issue appears

While testing on the device and watching the used resources (CPU, Memory) in Xcode I noticed that each time I open the page the video is loaded into the memory, but the memory is not set free if I leave the page, means that the memory size increases and increases. I assume that this finally leaves to the not playing videos.

Right now I don’t know how to proceed to fix this issue. Any recommendations?

Thanks a lot in advance.

` 

	        <video loop="loop" controls="controls" preload="metadata" muted="muted" 
	        	autoplay="autoplay" webkit-playsinline="webkit-playsinline" class="videoplayer" >
	          	<source src="{{exercise.video}}" type="video/mp4"/>
	          </video>


	  </div>`

image

2

Hi @fpenninger I am working on an app that is getting the same error that you have. I am going through a number of pages as well roughly 10 before I get the error! I was wondering if you had found a solution to the problem?

Thank you in advance!

3

Hi @GLalor, I was able to make it work a little better. Within the respective controller I added the following:

var videoplayer = document.getElementById("videoplayer");
$scope.$on('$ionicView.leave', function(){
          videoplayer.pause();
          videoplayer.currentTime = 0;
          videoplayer.src ="";
          $ionicHistory.clearCache();
  });

I don’t remember in detail, but I believe the reason was due to the videos being stuck in the memory. By adding that it was cleared after leaving the view.

Hope it helps.