HTML video is not visible inside a foreignObject in svg

My HTML video is not visible inside a foreignObject in svg. What am I doing wrong here?

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.

I checked that the foreignObject is actually created and takes place it is supposed to, so I would expect the video just appear over there and fill it (foreignObject), but this does not happen, so I am stuck.

1 answer

  • answered 2018-07-12 07:19 Robert Longson

    videos require a child source element.

    You also have a syntax error that mainSvg does not exist which I've corrected too.

    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>