Bug 184443

Summary: TextTrack not rendered in edge case with autoplay
Product: WebKit Reporter: Oren Me <oren.me>
Component: MediaAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Major CC: ahmad.saleem792, eric.carlson, jer.noble, rotem.vaknin, webkit-bug-importer
Priority: P2 Keywords: HTML5, InRadar
Version: Safari 11   
Hardware: All   
OS: iOS 11   
Attachments:
Description Flags
Simple test page that reproduces the issue none

Oren Me
Reported 2018-04-10 00:50:29 PDT
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
Attachments
Simple test page that reproduces the issue (2.41 KB, text/html)
2018-04-10 00:50 PDT, Oren Me 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Oren Me
Comment 1 2018-04-10 00:51:44 PDT
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...
Oren Me
Comment 2 2018-04-10 00:52:17 PDT
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.
Oren Me
Comment 3 2018-04-10 01:00:10 PDT
Issue happens on iOS10 and 11 and Safari desktop as well.
Oren Me
Comment 4 2018-04-10 01:23:38 PDT
Screen recording to show issue: https://we.tl/XtGhpXezW7 (Mov file)
Eric Carlson
Comment 5 2018-04-12 08:42:37 PDT
Your test case doesn’t work because it is missing script.js and mwEmbedLoader.php
Oren Me
Comment 6 2018-04-12 11:21:18 PDT
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>
Oren Me
Comment 7 2018-04-23 13:07:40 PDT
Hi Eric, were you able to test this with the new sample provided?
Rotem
Comment 8 2018-05-15 01:35:34 PDT
Hi Erik, We are experiencing this as well. Can you please take a look at Oren's Sample above? Very much appreciated:)
Rotem
Comment 9 2018-06-12 00:50:53 PDT
Hi Erik, Did you get the chance t check the information? Thanks
Ahmad Saleem
Comment 10 2023-06-14 16:25:51 PDT
Changed Comment 06 in JSFiddle: https://jsfiddle.net/8vfy5bnc/
Note You need to log in before you can comment on or make changes to this bug.