视频标签

Question

我想一个HTML5视频添加到3dsjs部队

这是JavaScript代码：

nodeEnter.append("svg:image") 
      .attr("class", "roundimage")   

      //.attr("xlink:href",  "http://www.xxxxxxx.com/img/people/profilevedranm.jpg") 
      .attr("xlink:href", function (imageLocation, i) { 
       return imageLocation.image; 
      }) 
      .attr("x", "-8px") 
      .attr("cursor","pointer") 
      .attr("y", "-8px") 
      .attr("title", function (title) { 
       debugger; 
       if (title.id === "basevideo") { 
        //alert("Do we have a handle"); 

        nodeEnter.append("svg:video") 
          .attr("width", "320") 
          .attr("height", "240") 
          .attr("autoplay", "") 
          .append("source") 
          .attr("source","video/hrewego.mp4") 
          .attr("type", "video/mp4"); 

这使得下面的HTML：

<g class="node" transform="translate(551.5633729425251,297.6744384520498)"> 
<image class="roundimage" xmlns:xlink="http://www.w3.org/1999/xlink" 
xlink:href="/img/Logo.png" x="-8px" 
     cursor="pointer" y="-8px" title="An Vivid Company" id="Maa Tech" width="96px" 
height="80px"></image> 
<video width="320" height="240" autoplay=""> 
    <source source="video/heythere.mp4" type="video/mp4"></source> 
</video> 
<text class="nodetext" dx="15" dy=".35em"></text> 
</g> 

它只要我可以告诉适当的视频元素，但它不会播放。即使当我删除图像标签时，该元素也不会被渲染。

是否有一些特殊的方式将“注入”一个视频SVG元素到页面上？我究竟做错了什么？

Answer 1

SVG 1.1没有<video>标签，因此大多数UA不支持SVG中的<video>。

如果你想SVG中的视频，你最好的选择是将它包装在<foreignObject>标签中。不要忘记给foreignObject的宽度和高度属性。