Question

我的HTML页面中有一个svg对象，其中包含多个外来对象。除了视频元素之外，所有这些都像我期望的那样工作并且与svg一起负责任地扩展。

视频元素不尊重它的容器对象宽度/高度。我既不能使用默认的视频控制选项，也会显示播放菜单但不能互动。 此问题仅发生在Chrome 中，Firefox会按预期显示该元素，并且该视频可播放。

printscreen comparing chrome (fail) with firefox (success)

我已经尝试解决这个问题（没有成功）：

用iFrame替换对象（同样的问题）
使用Jquery视频插件处理CSS（如jQuery.fitvids）
在容器div中包装视频（尝试位置响应/绝对/固定/ ......）
在第二个foreignObject元素中包装视频
实际上视频对象上的x，y，宽度和高度的任何可能组合都是它的容器。（如果我对宽度和高度使用非响应值，我可以定位它，但我需要响应，因为它的父级可以改变大小，还有播放和暂停视频的菜单仍然无法工作）

＆＃13;

#svgContainer {
  width:500px;
  height:250px;
  background-color:#34ff00;
}

#videoTitle {
  font-size:80px;
  font-weight:bold;
}

#videoObject {
  width:100%;
  height:auto;
  object-fit:contain;
}

＆＃13;

<div id="svgContainer">
  <?xml version="1.0" encoding="utf-8"?>
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 959.8 540">
    <g id="DIA_REGULARMEDIAVIDEO">
      <foreignObject x="50" y="25" width="655" height="69">
        <div id="videoTitle">My video</div>
      </foreignObject>
      <foreignObject x="0" y="120" width="959.8" height="420">
          <video id="videoObject" x="0" y="0" width="300" controls="" preload="">
          <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"/>
          </video>
      </foreignObject>
    </g>
  </svg>
</div>

＆＃13;

SVG中的<video>对象浮动在它的外部对象容器

0 个答案: