視頻標籤

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的寬度和高度屬性。