Preact indirectly trigger a video pause

Hi,

I came across a quite intriguing issue that I assume is related to the DOM mutations strategy that preact is using.

When rendering the following component with preact:

class Player extends Component {
    state = { show: true }

    componentDidMount() {
        document.onclick = () => {
            this.setState({ show: false })
        }
    }

    render() {
        return (
            <div>
                { null }
                { this.state.show && <div></div> }
                { null }
                <video
                    autoplay="true"
                    src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
                    style={ {width:'400px',height:'300px'} }
                />
            </div>
        );
    }
}

I observed that on state change (when clicking on the document), the video playback is being paused. After reproducing in a minimal example and comparing with React I can say that this issue is only reproducible with preact.

Here is a repo of a demo showing the issue: https://github.com/happypoulp/preact-video-issue

The structure of the elements in the render function above may seems peculiar but the issue does not seem to exist when using another structure (like removing one of the { null } or changing the <video> position).

I have no idea about why a change in the DOM may cause a video to be paused but since this issue is reproducible 100% of time, I guess that someone more familiar with the rendering strategy of preact may have a good explanation for it.

I have found various ways to avoid this issue (by changing the structure or by moving out the video tag out of the render function) so it’s not really critical but I’d really like to understand what’s happening here.

Issue reproduced with preact ^8.1.0, on Chrome 58.0.3029.110.

Thanks.

[yaodingyd]

@vedam Your issue is actually different from OP’s. Preact caches components and their DOM elements, so when the first time video route loads, it works fine; next time it loads, it’s the cached element, and “Video pausing on DOM move/unmount is straight Google Chrome bug”. I think React doesn’t cache components, so every time video loads, it’s a new component, and it autoplays fine.

Unfortunately, there is nothing much to do unless we expose one option to disable component caching.

[developit]

Yup, it would have been getting moved within its parent. I’m just working to push 8.2.0 out right now.