3djs中的视频标签

Video tag within the 3djs

本文关键字：标签 的视频 3djs      更新时间：2023-09-26

我正在尝试将一个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元素"注入"到页面上？我做错了什么？

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

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

相关文章：