Question

我的HTML视频在svg中的foreignObject内部不可见。我在这里做什么错了？

HTML：

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

CSS：

#drawRegion {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: relative;
}

Javascript：

debugger;
const svg = d3.select("#drawRegion")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%");
svg.append("rect")
  .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow");

const fObj = mainSvg
  .append("foreignObject");

fObj
  .attr("x", "20%")
  .attr("y", "10%")
  .attr("width", "60%")
  .attr("height", "80%");

  const vidObj = fObj
  .append("xhtml:video");
  vidObj
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("href", "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4");

JSFiddle。

我检查了foreignObject是否确实创建并按照预期的方式进行了，所以我希望视频只是出现在那儿并填充它（foreignObject），但这不会发生，所以我被困住了。

Answer 1

videos需要一个子源元素。

您还存在一个语法错误，指出mainSvg不存在，我也已对此进行了纠正。

const svg = d3.select("#drawRegion")
  .append("svg")
  .attr("width", "100%")
  .attr("height", "100%");
svg.append("rect")
  .attr("x", "0")
  .attr("y", "0")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "yellow");

const fObj = svg
  .append("foreignObject");

fObj
  .attr("x", "20%")
  .attr("y", "10%")
  .attr("width", "60%")
  .attr("height", "80%");
  
  const vidObj = fObj
  .append("xhtml:video");
  vidObj
  .attr("width", "100%")
  .attr("height", "100%")

  
  const src = vidObj.
  append("xhtml:source");
  src
    .attr("type", "video/mp4")
    .attr("src", "https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4");

#drawRegion {
  width: 100%;
  height: 100%;
  display: inline-block;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  position: relative;
}

<div id="drawRegion">

</div>
<script src="https://d3js.org/d3.v5.min.js"></script>

Answer 2

添加到Robert Longson的解决方案之上，当我添加“ controls”属性时，它对我有用

1. wipe data of emulator and delete device from emulator list.
2. Reinstall Android studio
3. Download all SDK needed.

HTML视频在SVG中的foreignObject内部不可见

2 个答案: