Monday, 7 October 2019

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

(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.



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

No comments:

Post a Comment