I attached an example to reproduce. This bug happens in Safari (tested in MAC) * Video should be hidden (display: none) * Play the video (HLS) * Enter full screen * Exit full screen * Seek to end of playback * When playing the video the video is expected to start over from currentTime 0. Instead the playback plays the last second of the playback. This is the example (Try few times as this doesn't reproduce 100% of the attempts): <!DOCTYPE html> <html lang="en"> <head> <script> setInterval(()=>{document.getElementById("currTime").innerHTML = document.getElementById('vid').currentTime}, 500) </script> </head> <body> <div id="videoContainer" style="width: 640px; height: 480px"> <div> <video id="vid" src='http://qa-apache-php7.dev.kaltura.com/p/1091/sp/109100/playManifest/entryId/0_xjjki1id/protocol/http/format/applehttp/flavorIds/0_jpggin3q,0_8e75zdb1,0_8bdtuqj2,0_v3u9vh5n/a.m3u8?playSessionId=bf508128-58ae-9cc1-2c88-93751b645189:1a994be0-18d0-6afe-aabe-d42507e84500&referrer=aHR0cDovL2xvY2FsaG9zdDo4MDgwLw==&clientTag=html5:v0.53.0' playsinline controls style="display: none;"/> </div> <span id="currTime"></span> <button onclick="document.getElementById('vid').play()">play</button> <button onclick="document.getElementById('vid').currentTime = document.getElementById('vid').duration">seek to end</button> <button onclick="document.getElementById('videoContainer').webkitRequestFullScreen();">fullscreen</button> <button onclick="document.webkitExitFullscreen();">Exit fullscreen</button> </div> </body>
<rdar://problem/61402909>
Playing a HLS stream with "display:none" will always give terrible results. AVFoundation uses the current display size to determine which variant to switch to, and when the element is hidden in CSS, it has a display size of zero, and AVFoundation will naturally want to switch to the lowest video bitrate tier. Can I ask what the use case is here?
Hey, thanks for the quick answer. We are using a VR plugin which consumes the video and displays it on Canvas
Jer, can you give other recommendation how to manage VR then? You don’t want the video to be seen while you sample it on a canvas. Should we instead of doing “display: none” do “visibility: hidden;” or “opacity: 0;” or “position: absolute; top: -9999px; left: -9999px;”