Question

我正在尝试向3dsjs Force添加html5视频

这是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>

它尽可能地创建了适当的视频元素，但它不会播放。即使我删除了图像标记，也不会渲染该元素。

是否有一些特殊的方式来注射＆＃34;页面上的视频SVG元素？我做错了什么？

Answer 1

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

如果您想在SVG中使用视频，最好将其打包在<foreignObject>标记中。不要忘记给出foreignObject的width和height属性。

3djs中的视频标签

1 个答案: