187445 2018-07-08 02:26:38 -0700 Video hides when on last frame and changing page visibility 2019-08-19 16:07:15 -0700 1 1 1 Unclassified WebKit Media Safari 11 Mac macOS 10.13 RESOLVED CONFIGURATION CHANGED InRadar P2 Normal --- 1 tombigel webkit-unassigned cdumez jer.noble peng.liu6 webkit-bug-importer oldest_to_newest 1440210 0 344542 tombigel 2018-07-08 02:26:38 -0700 Created attachment 344542 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 1441036 1 webkit-bug-importer 2018-07-10 17:30:39 -0700 <rdar://problem/42049015> 1562829 2 peng.liu6 2019-08-19 16:07:15 -0700 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) ================================================================== 344542 2018-07-08 02:26:38 -0700 2018-07-08 02:26:38 -0700 demo to reproduce bug safari-last-frame.html text/html 1645 tombigel PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIiA+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9 IlVURi04Ij4KICA8dGl0bGU+U2FmYXJpIHZpZGVvIGxhc3QgZnJhbWUgZGlzYXBwZWFycyBidWc8 L3RpdGxlPgogIDxzdHlsZT4KICAgICNzdGFnZSB7cGFkZGluZzogMjBweDt9CiAgICAjY29udHJv bHMge3BhZGRpbmctYm90dG9tOiAyMHB4O30KICA8L3N0eWxlPiAKPC9oZWFkPgo8Ym9keT4KICA8 ZGl2IGlkPSJzdGFnZSI+CiAgICA8ZGl2IGlkPSJjb250cm9scyI+CiAgICAgIDxidXR0b24gaWQ9 InBsYXkiPlBsYXk8L2J1dHRvbj4KICAgICAgPGJ1dHRvbiBpZD0icGF1c2UiPlBhdXNlPC9idXR0 b24+CiAgICAgIDxidXR0b24gaWQ9InNraXAiPlNraXAgdG8gbGFzdDwvYnV0dG9uPgogICAgICA8 YnV0dG9uIGlkPSJzZWVrIj5TZWVrIHRvIG1pZGRsZTwvYnV0dG9uPgogICAgICA8YnV0dG9uIGlk PSJzdGFydCI+U2VlayB0byBzdGFydDwvYnV0dG9uPgogICAgPC9kaXY+CiAgICA8dmlkZW8gaWQ9 InZpZGVvIiB3aWR0aD0iMzIwIiBoZWlnaHQ9IjE4MCIgYXV0b3BsYXkgbXV0ZWQgc3JjPSJodHRw Oi8vZG93bmxvYWQuYmxlbmRlci5vcmcvcGVhY2gvYmlnYnVja2J1bm55X21vdmllcy9CaWdCdWNr QnVubnlfMzIweDE4MC5tcDQiPjwvdmlkZW8+CiAgICA8ZGl2IGlkPSJ2aWRlb2luZm8iPjwvZGl2 PiAgCiAgICA8ZGl2IGlkPSJ2aXNpYmlsaXR5aW5mbyI+PC9kaXY+CiAgPC9kaXY+CiAgPHNjcmlw dD4KICAgIHBsYXkuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgICAg IHJldHVybiB2aWRlby5wbGF5KCk7CiAgICB9KTsKICAgIHBhdXNlLmFkZEV2ZW50TGlzdGVuZXIo J2NsaWNrJywgZnVuY3Rpb24gKCkgewogICAgICByZXR1cm4gdmlkZW8ucGF1c2UoKTsKICAgIH0p OwogICAgc2tpcC5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGZ1bmN0aW9uICgpIHsKICAgICAg cmV0dXJuIHZpZGVvLmN1cnJlbnRUaW1lID0gdmlkZW8uZHVyYXRpb247CiAgICB9KTsKICAgIHNl ZWsuYWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgICAgIHJldHVybiB2 aWRlby5jdXJyZW50VGltZSA9IHZpZGVvLmR1cmF0aW9uIC8gMjsKICAgIH0pOwogICAgc3RhcnQu YWRkRXZlbnRMaXN0ZW5lcignY2xpY2snLCBmdW5jdGlvbiAoKSB7CiAgICAgIHJldHVybiB2aWRl by5jdXJyZW50VGltZSA9IDA7CiAgICB9KTsKICAgIHZpZGVvLmFkZEV2ZW50TGlzdGVuZXIoJ3Rp bWV1cGRhdGUnLCBmdW5jdGlvbiAoKSB7CiAgICAgIHJldHVybiB2aWRlb2luZm8uaW5uZXJUZXh0 ID0gJ2N1cnJlbnQ6ICcgKyB2aWRlby5jdXJyZW50VGltZSArICdcbmR1cmF0aW9uOiAnICsgdmlk ZW8uZHVyYXRpb247CiAgICB9KTsKICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ3Zpc2li aWxpdHljaGFuZ2UnLCBmdW5jdGlvbiAoKSB7CiAgICAgIHJldHVybiB2aXNpYmlsaXR5aW5mby5p bm5lclRleHQgPSB2aXNpYmlsaXR5aW5mby5pbm5lclRleHQgKyAnXG4nICsgRGF0ZSgpLm1hdGNo KC9cZCs6XGQrOlxkKy8pWzBdICsgJzogJyArIChkb2N1bWVudC5oaWRkZW4gPyAnaGlkZGVuJyA6 ICd2aXNpYmxlJyk7CiAgICB9KTsKICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw+Cg==