javascript - 通过 DOMParser 渲染时，HTML 5 视频不会在 Safari 中显示(通过 innerHTML 渲染工作正常)

Question

(注意:有很多关于 video not rendering on safari 的问题。这个问题是关于在 Safari 中使用 DOMParser 渲染视频的。如果我使用 innerHTML 渲染视频，一切正常。)

我有最简单的 HTML 5 视频，它通过 DOMParser 呈现如下:

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 事件可以确认)。

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

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

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

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