通过 DOMParser 渲染时，HTML 5 视频不会显示在 Safari 中（通过 innerHTML 渲染工作正常）

（注意：有很多关于视频无法在 safari 上渲染的问题。这个问题是关于在 Safari 中使用 DOMParser 渲染视频。如果我使用innerHTML 渲染视频，一切正常。）

我有最简单的 HTML 5 视频，它是通过以下方式呈现的DOMParser如下：

codepen https://codepen.io/sangupta/pen/poozmwa

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");

这在 Chrome 中工作正常，但在 Safari 中，视频不会被渲染。我只看到白屏。 但是，如果我通过innerHTML 渲染它，一切都会正常并且视频会显示出来。

任何人都可以建议有关 Safari 中 DOMParser 的问题吗？caniuse https://caniuse.com/#feat=xml-serializer显示 Safari 对 DOMParser 的完整支持。

在 safari 的多个版本上进行了测试，即版本 12.1.1 (14607.2.6.1.1) 和版本 11.1 等。

刚刚测试了一下，视频IS在屏幕上并加载（html 检查器、网络流量和caplayDOM 中加载的视频触发的事件可以证实这一点）。

如果您尝试切换选项卡然后返回视频选项卡，视频将会显示，但没有控件，尽管我可以通过触发事件来播放它。

这似乎是 Safari 的问题，可能与其安全策略有关。

VIDEO https://recordit.co/mdZ4J89CL8 https://recordit.co/mdZ4J89CL8

CodePen 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');
 })

不幸的是 Safari 存储库不是公开的，因此检索已修复和未修复的问题有点困难，但我可以肯定地说你的代码是正确的 and Safari 有一个错误（切换选项卡时请参阅上面不一致的行为）。