Memory always increasing when I'm using the HTML5 video tag

Question

Hi,

I have some apps that has videos on their content, but I'm experiencing a common problem in all of them. The memory usage always increases when I navigate from a page to another. I saw that this problem occurs because of the <video> tags usage. when I remove these video tags, the app works perfectly, without memory leak.

I have already tried to call "CollectGarbage();" and it not works. I tried to remove the video DOM element on page unload, and it not works.

My videos are all in the recommended formats (h264, mp4, etc).

I don't know what to do, because always I have to use video in my apps, I face this kind of problem.

Answer 1

Can you post a very simple repro of this issue for investigation?

---

Jeff Sanders (MSFT)

Answer 2

Hi Jeff

1-) Create a Grid layout app

2-) Add a simple HTML5 <video> tag on the file "itemDetail.html"

<video>
  <source src="/test.mp4" type="video/mp4" />
</video>

3-) Add the mp4 video on the project that you used on the tag

4-) Duplicate the "itemDetail" folder, to simulate lots of HTML content page, containing the same video tag

5-) For each itemDetail.html, change the js reference to point to the correct file, for example,

To the itemDetail9/itemDetail.html file, change the js call to:

<script src="/pages/itemDetail9/itemDetail.js"></script>

6-) Change data.js a attribute that will say to us what is the path to the page:

  var sampleItems = [
        { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray, page: "/pages/itemDetail/itemDetail.html" },
        { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray, page: "/pages/itemDetail2/itemDetail.html" },
        { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray, page: "/pages/itemDetail3/itemDetail.html" },
        

7-) Change "groupedItems.js"

itemInvoked: function (args) {
            if (appView.value === appViewState.snapped) {
                ...
            } else {
                // If the page is not snapped, the user invoked an item.
                var item = Data.items.getAt(args.detail.itemIndex);
                nav.navigate(item.page, { item: Data.getItemReference(item) });
            }
        },

8-) Now, run the app and navigate to the different pages containing the video tags, repeat the process a lot of times.

You can see a high memory, and if we continue to navigate, to the pages that we already visited, the memory keep increasing

Answer 3

Answer 4

Answer 5

Thanks!

---

Jeff Sanders (MSFT)

Answer 6

Thanks again for reporting this, I believe this is due to a bug that was fixed with the next release! -Jeff

---

Jeff Sanders (MSFT)

Answer 7

Thank you for your attention,

:)

Answer 8

Dear Jeff,

I think I meet same problem now, have any update about this bug? (I used vs 2012 update2)

Thanks!