(注意:有很多关于视频无法在 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 有一个错误(切换选项卡时请参阅上面不一致的行为)。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)