javascript - 3djs 中的视频标签

Question

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

这是 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 元素“注入(inject)”到页面上？我做错了什么？

Answer 1

SVG 1.1 没有 <video>标签所以大多数UA不支持<video>在 SVG 中。

如果您想要 SVG 格式的视频，最好的选择是将其包装在 <foreignObject> 中。标签。不要忘记指定foreignObject 的宽度和高度属性。