html视频标签无法预加载，因此无法通过iOS (Safari或Chrome)的WebComponents自动播放，但它

Question

iOS版本14.4

期望结果:

1. 视频自动播放页面加载

视频没有音轨，我也把它静音了。

当我直接通过静态HTML(如

)运行视频标签时，我能够让它在iOS上工作

<video id="anshul-video" poster="..." src="..." playsinline="" webkit-playsinline autoplay="" preload="auto" loop="" muted="">
<source id="something_else" src="..." type="video/mp4">
</video>

但是当我通过Web组件这样做时，它不起作用。如

export default class anshulCommonHeroFeatures extends HTMLElement {
connectedCallback() {
this.setHeroFeatures();
}
setHeroFeatures() {
const commonHeroFeaturesTemplate = document.createElement('template');
commonHeroFeaturesTemplate.innerHTML = `<video id="..." src="..." playsinline="" autoplay="" preload="auto" loop="" muted="">
<source id="something_else" src="..." type="video/mp4"
</video>`;
this.appendChild(commonHeroFeaturesTemplate.content.cloneNode(true));
}
}
window.customElements.define('anshul-common-hero-features', anshulCommonHeroFeatures);

Web组件代码在其他任何地方都可以工作。它适用于桌面浏览器。它适用于安卓手机的Chrome浏览器。WebComponent页面只在iOS上失败。

欢迎任何提示或建议。

Answer 1

我也有同样的问题。为了克服这个问题，我检查了webcomponent的DOM中的video标签(在appendChild之后)，克隆了每个video节点，并用克隆替换了原始的video标签。

let videos = this.querySelectorAll('video');
videos.forEach(vid => {
vid.parentNode.insertBefore(vid.cloneNode(), vid);
vid.parentNode.removeChild(vid);
});

这不是理想的，因为它可能会破坏对旧节点的引用，但至少它修复了自动播放问题。