I am trying to add videos to a listView. I need to dynamically add and remove videos. Everything works fine, but in the background the memory footprint keeps increasing as I add new videos and the app crashes after some time. I am posting my code below,
and the different options I tried out so far.
HTML Code
<!--Template-->
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
<video class="VideoClip" controls autoplay muted loop>
<source data-win-bind="src: videoSrc" type="video/mp4" />
</video>
</div>
<!--Video List-->
<div class="videoList" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{selectionMode: 'none'}" ></div>
JAVASCRIPT
//Fetch videoList From UI
var videoList = element.querySelector(".videoList").winControl;
//Bind the template to the List
videoList.itemTemplate = element.querySelector(".itemtemplate");
//Create a new binding list (New Data Source)
var listOfVideos = new WinJS.Binding.List();
//Get all the videos from a particular folder asynchronously mplate
folder.getItemsAsync().then(function (items)
{
for (var itemCount = 0; itemCount < items.length; itemCount++)
{
var data = new Object();
data.videoSrc = URL.createObjectURL(items[itemCount]);
listOfVideos.push(data);
}
}
//Connect the binding list and list view
videoList.itemDataSource = listOfVideos.dataSource;
So far, everything works fine. I have all the videos displayed and playing. However if I want to change the items in the ListView, the memory held by the ListView is not released. As I keep adding items the memory keeps increasing (as viewed through task
manager). When I remove items, the memory isn't freed. After some time the app crashes.
Here are the different things I tried, but didnt see the memory released.
Option 1: Pop all the videos
listOfVideos.pop();
Option 2: set the binding list object to null
listOfVideos = null;
Option 3: Get each <video> from the DOM and release the URL
URL.revokeObjectURL(childToBeRemoved.src);
Option 4: Get each <video> from the DOM and set the src to null
Option 5: Get the parent DOM element and remove the child videos
Used empty <div> objects in the template instead of videos. Then tried to programatically add the videos to the divs This worked fine, but after removing the child videos from the div, the memory wasn't released.