question

Devin avatar image
Devin asked

Developing a FireTV hybrid app with video integration causes video stutter

So I'm designing an app that in a nutshell loops through videos and images on intervals (basically a slideshow at this point). I'm doing this through the hybrid app model of having a basic android app with a WebView that controls pretty much the entire app.


Everything works great except for one major flaw that I'm unaware of how to fix. I'm not entirely sure how/where to look for help in this area since I just started even trying to work on a firetv app 2 days ago.


The issue I'm having is that whenever I switch from a video to an image, back to a video, the second video is always stuttery. If I continue down the rabbit hole, the stuttering gets worse up until the point at which I run out of memory and the app crashes. My question is, is there something special I need to do when 'unloading' the video element in order to unload the video player from memory/being used by the hardware?

I'm pretty sure what is happening is that when the first video ends and switches to just a picture, the video memory, or something sticks around. When the next video starts, there are essentially two instances of video playback, which makes sense why it continues to worsen.

Another indicator is that if I go straight from one video to another video, there is no issue. It only happens when I try to 'close' a video instance and open a new one.


Code side, what I have is a react web app that goes through a series of initialization steps that are not relevant. I have a route that you end up at which is what the videos below will show. basically, it's controlled timeouts that after set lengths will automatically switch to a new source but can be controlled by the controller which I am doing in the videos. The video itself is literally just...


<video ref={ref} muted={true} className={classes.videoAd} />


inside a useEffect, I check for changes on the source and if one happens, the following is called

useEffect(() => {
    if (ref.current) {
        const el = ref.current;
        el.src = videoSrc.link;
        el.currentTime = 0;
        el.play().then(() => paused ? el.pause() : undefined);
    }
    return () => {
        if (ref.current) {
            ref.current.pause();
            ref.current.src = '';
            ref.current.load();
        }
    }
}, [ videoSrc ]);

I attach the video link to .src and hit play.. once the videoSrc changes, the return is called and SHOULD be unloaded as far as I'm aware, but I do know that the webview and chromium versions are different from standard versions. So my question is, am I doing something wrong? is there a special way to end videos?


I have two example videos.


#1 -- shows going from a video to an image to a video

https://www.youtube.com/watch?v=dWSyrQmpql4


#2 -- shows going from image to video to video

https://www.youtube.com/watch?v=3eZjDLsyUC0

fire tvappweb appsvideocode
10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

1 Answer

Sheldon@Amazon avatar image
Sheldon@Amazon answered

Hello,


Thank you for posting. Relevant team is investigating the issue and we will post here as soon as we have an update.


Regards,

Sheldon

10 |5000

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.