Created attachment 337597 [details] Simple test page that reproduces the issue Summary: TextTrack is not rendered even though it should Steps to Reproduce: play an HLS stream with captions, where caption is set as default or caption option is remembered from previous user selection Immediately after page starts loading move to another tab or another application(not safari) and then after a while go back to the safari tab. the video should be set with autoplay(and muted of course following latest changes) Expected Results: Text track rendered and can be seen on top of video Actual Results: Text track can't be seen Version/Build: 11.0 (12604.1.38.1.7) Configuration: added simple test page to show the issue with exact config, test stream taken from apple developer site
OK, so issue also happens on play that is initiated from user action, e.g. when I load the test page and press on the play button to start playback. You can just comment the vid.play() line in the test page I originally added and hit play and see it happens - it will take a few times...
Even changing text tracks doesn't recover the issue. This is more rare so I wanted to add this as well, usually changing the selected track causes the text track to render.
Issue happens on iOS10 and 11 and Safari desktop as well.
Screen recording to show issue: https://we.tl/XtGhpXezW7 (Mov file)
Your test case doesn’t work because it is missing script.js and mwEmbedLoader.php
I apologise Eric, I accidentally uploaded the wrong test page. I can't see how to upload another file here, so I'll paste it here, let me know if this is OK: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Demo</title> <meta name="description" content="Demo"> </head> <body> <video controls muted width=640 height=360></video> <textarea cols=50 rows=25></textarea> <script> var textArea = document.querySelector("textarea"); function prependToTextArea(text){ console.warn(text); textArea.value = text + "\n" + textArea.value; } var nativeEvents = [ 'loadstart', 'progress', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'play', 'pause', 'loadedmetadata', 'loadeddata', 'waiting', 'playing', 'canplay', 'canplaythrough', 'seeking', 'seeked', // 'timeupdate', 'ended', 'ratechange', 'durationchange', 'volumechange' ]; var vid = document.querySelector("video"); prependToTextArea("set source"); vid.src= "http://tinyurl.com/y9udlma6"; prependToTextArea("call play"); // vid.play(); nativeEvents.forEach((event) => vid.addEventListener(event, (e)=> prependToTextArea("event: " + e.type)) ); ["loadedmetadata", "canplay"].forEach((event) => vid.addEventListener(event, (e)=>{ prependToTextArea("No of text tracks: " + vid.textTracks.length); if (vid.textTracks.length > 0){ for (var i = 0; i< vid.textTracks.length; i++){ vid.textTracks.onchange = () => prependToTextArea("text track changed"); vid.textTracks[i].oncuechange = (e) => prependToTextArea("VTTCue changed: " + e.currentTarget.activeCues[0].text) } } }) ); </script> </body> </html>
Hi Eric, were you able to test this with the new sample provided?
Hi Erik, We are experiencing this as well. Can you please take a look at Oren's Sample above? Very much appreciated:)
Hi Erik, Did you get the chance t check the information? Thanks
Changed Comment 06 in JSFiddle: https://jsfiddle.net/8vfy5bnc/