Bug 187445 - Video hides when on last frame and changing page visibility
Summary: Video hides when on last frame and changing page visibility
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Media (show other bugs)
Version: Safari 11
Hardware: Mac macOS 10.13
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-07-08 02:26 PDT by Tom Bigelajzen
Modified: 2019-08-19 16:07 PDT (History)
4 users (show)

See Also:


Attachments
demo to reproduce bug (1.61 KB, text/html)
2018-07-08 02:26 PDT, Tom Bigelajzen
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Tom Bigelajzen 2018-07-08 02:26:38 PDT
Created attachment 344542 [details]
demo to reproduce bug

To reproduce:
1. Play an mp4 video in Safari (tested on MacOS 10.13, Safari 11 and Safari 12 Preview) 
2. Wait for the video to end and show last frame
3. Switch tab or application window (trigger a visibilitychange "hidden" event)
4. Switch back to the video tab

Result:
The video disappears from the page view
- The video is still in the dom and still interactive.
- Any change to the video - seeking, playing etc shows the video again

Notes:
While playing with this I noticed the last frame of the video is a point of inconsistent behaviour - 
Skip to last frame while playing and the video view freezes in current frame, sometimes it skips to "almost" the last frame, sometimes the video disappears while skipping to the last frame.
Should be investigated a bit more and worth another bug if there isn't any.

see attached html file, online codepen version here - https://codepen.io/tombigel/pen/BVXVpX
Comment 1 Radar WebKit Bug Importer 2018-07-10 17:30:39 PDT
<rdar://problem/42049015>
Comment 2 Peng Liu 2019-08-19 16:07:15 PDT
On Safari Technology Preview release 89, this bug is not reproducible. The last video frame will always be there when we switch tab or application window back and forth.

About the inconsistent behavior of skipping to the last frame, I can only reproduce the inconsistency with some long video files, e.g., the big Bucky bunny video whose duration is almost 10 minutes. For short videos (~10s), the skipping to the last frame is always showing the last frame.

I would suggest implementing the skipping to the last frame by setting the currentTime attribute of the video element to a value which is little smaller than the duration.
Example code is below:
==================================================================
// This line will only work consistently when the video file is very short (~10 seconds)
skip.addEventListener('click', () => video.currentTime = video.duration)

// Below line will always skip to the last frame
skip.addEventListener('click', () => video.currentTime = video.duration - 0.01)
==================================================================