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

user_5457113 0
Viewed 321

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

domparser safari javascript
1 Answers

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

user_12340870
Related