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

Question

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

我有通过DOMParser 呈现的最简单的 HTML 5 视频，如下所示：

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

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

任何人都可以就 Safari 中的 DOMParser 有什么问题提出建议。 caniuse 显示 Safari 对 DOMParser 的完整支持。

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

Answer 1

刚刚测试，视频IS在屏幕上并加载（html检查器，网络流量和DOM中加载的视频触发的caplay事件可以确认）。

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

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

视频 https://recordit.co/mdZ4J89CL8

代码笔 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 存储库不是公开的，因此检索已修复和未修复的问题有点困难，但我可以肯定地说 您的代码是正确的 并且 Safari 存在错误（请参阅上面的不一致行为，切换选项卡时）。