Bug 187445

Summary:

Video hides when on last frame and changing page visibility

Product:

WebKit

Reporter:

Tom Bigelajzen <tombigel>

Component:

Media

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

cdumez, jer.noble, peng.liu6, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

Safari 11

Hardware:

Mac

OS:

macOS 10.13

Attachments:

Description	Flags
demo to reproduce bug	none

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)
==================================================================