HTML 5 video doesn't show up in Safari when rendered via DOMParser (rendering via innerHTML is working fine)

Question

(note: There are many questions on video not rendering on safari. This question is about rendering video using DOMParser in Safari. Everything works fine if I user innerHTML to render the video.)

I have the simplest possible HTML 5 video which is being rendered via DOMParser as follows:

codepen

var htmlStr = `
<video xmlns="http://www.w3.org/1999/xhtml" controls="">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
  Your browser does not support HTML5 video.
</video>
document.getElementById('test-vid').appendChild(doc.firstChild);
`;
var doc = new DOMParser().parseFromString(htmlStr, "text/xml");

This works fine in chrome but in case of Safari, the video doesn't get rendered. I just see the white screen. However if I render it via innerHTML, everything works fine and video shows up.

Can anyone advice on what's wrong with DOMParser in Safari. caniuse shows full Safari support for DOMParser.

Tested on many versions of safari namely Version 12.1.1 (14607.2.6.1.1) and Version 11.1 etc.

Note that you could just use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) and copy and paste your code from your CodePen into it. Then you wouldn't make mistakes like putting your JavaScript in your HTML string variable... ;) — Heretic Monkey, Oct 04 '19 at 17:25
@HereticMonkey There are a lot of scenarios where you actually could have HTML in a string. Template literals are often used to store _templates_ in javascript. — Mosè Raguzzini, Oct 08 '19 at 13:43
@MosèRaguzzini Of course, but that's not what I said was the mistake. I said putting JavaScript in an HTML string. The `DOMParser` will not parse that as JavaScript, but only as text... In any case, if you compare the linked CodePen with the code shown here, my comment will make more sense. — Heretic Monkey, Oct 08 '19 at 13:47
Ok in the codepen javascript is outside (appenChild included), I suppose the error was done copy/pasting from the pen — Mosè Raguzzini, Oct 08 '19 at 13:58
Hm, worked like a charm using Safari v13.0.2 (14608.2.40.1.2) on macOS Mojave... — Oliver Hader, Oct 13 '19 at 20:07

Mosè Raguzzini · Answer 1 · 2019-10-11T11:37:39.187

Just tested, the video IS on screen and loaded (html inspector, network traffic and caplay event triggered by video loaded in DOM can confirm it).

If you try to switch tab and then return to the vid tab, the video will show up, but with no controls, although I'm able to play it by triggering an event.

It seems to be a Safari issue, probably related to its security policies.

VIDEO https://recordit.co/mdZ4J89CL8

CODE PEN JS

var htmlStr = `
<video id="myvideo" xmlns="http://www.w3.org/1999/xhtml" controls="">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"/>
  Your browser does not support HTML5 video.
</video>`;

var doc = new DOMParser().parseFromString(htmlStr, "text/xml");

document.getElementById('test-vid').appendChild(doc.firstChild);

window.onclick = function(){
  document.getElementById('myvideo').play();
}

 document.getElementById('myvideo').addEventListener('canplay', function(){
   console.log('canplay');
 })

Unfortunately the Safari repo isn't public so retrieve fixed and not fixed issues is slightly difficult but I can state for sure that your code is correct and Safari has a bug (see the inconsistent behavior above, when switching tabs).

Can you tell me what version of OS and browser you tested for? Can you provide screenshot? — dasfdsa, Oct 09 '19 at 15:27
I've tested in Safari 11.1 (13605.1.33.1.2) on OSX High Sierra — Mosè Raguzzini, Oct 11 '19 at 11:24
whoa! Safari 11.1 doesn't show the video but when I switched the tab, it shows up. Can you confirm? — dasfdsa, Oct 11 '19 at 11:51
I've added the video of it and the code to check that the video is present also without switching tab, as the canplay event is fired — Mosè Raguzzini, Oct 11 '19 at 12:01

score 1 · Answer 2 · answered Oct 01 '22 at 07:18

This is a bug in webkit. Here's a link to the webkit bug ticket.

comment #6 (2021-03-04 22:50:29 PST):

[...] media element not initialize its UA shadow root when it's created inside a document without a browsing context. The fix is to initialize the media element controls once it's inserted into a document with a browsing context.
comment #12 (2022-08-02 11:16:50 PDT): Pull request: https://github.com/WebKit/WebKit/pull/2955
comment #13 (2022-08-08 11:47:08 PDT): Committed 253225@main (f331cc98c1de): https://commits.webkit.org/253225@main Reviewed commits have been landed. Closing PR #2955 and removing active labels.

As of right now, I don't know when the fix will be release / what versions of Safari it will be released to and whether / how far back they'll backport the fix.

HTML 5 video doesn't show up in Safari when rendered via DOMParser (rendering via innerHTML is working fine)

2 Answers2

Linked