我的视频在我的 svg 中加载，但是当我在实时服务器上托管它时，视频不会加载。静态它有效

Question

所以我在我的 svg 中嵌入了一个视频，它起作用了。但是当我加载它并将其设置为背景图像时。 svg 加载。但是它里面的视频缓冲但实际上并没有加载。它应该自动播放视频。如下图

https://codepen.io/audiophones_/pen/WNgWVPr

我假设这与实时服务器和服务文件有关。有没有办法让我的视频加载到我的 svg 中？不确定它没有正确加载什么。

这是我在 svg 中的异物内使用视频标签的代码片段。 codepen 显示了这个的完整版本。

 <g clip-path="url(#myClipPath)">
                                  
          <foreignObject   width="927.74" height="595.39" x="290" y="110">
  <video  id="myvide" type="video/mp4" preload="auto" xmlns="http://www.w3.org/1999/xhtml" width="927.74" height="595.39" autoplay="true" loop="1" muted="true">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"/>
  </video>
</foreignObject>

                                  
                                   <!-- <foreignObject  width="400" height="200" x="490" y="210">

    <video xmlns="http://www.w3.org/1999/xhtml"  width="400" height="200" xhtml="video"
    allow="autoplay"  preload="" autoplay="autoplay" loop="1" muted="muted" controls="" playinline="true" >
         <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4"/>
    </video>
  </foreignObject> -->
  <!--  x and y is the positioning    -->
                                  </g>