D3.js附加视频元素 [英] D3.js append video element

问题描述

我正在使用d3.js创建动态幻灯片。文本和图像正常工作，但另一方面，我不知道我怎么能追加视频。有什么想法吗？

Hi,

i am using d3.js for creating dynamc slideshow. Texts and Images work correctly but on the other hand i dont know how could i append video. Any idea?

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
....
<script>

var svg = d3.select("#content")
                .append("svg").
                .attr("width", "900px")
                .attr("height", "400px");

 var canvas = svg.append("g");

 canvas.append("image")
        .attr("x", 20)
        .attr("y", 125)
        .attr("height", "50px")
        .attr("width", "50px")
        .attr("xlink:href", "imageee.png");


 canvas.append("text")
        .text("hello")
        .attr("x", 145)
        .attr("y", 74)
        .style("fill", "yellow")
        .attr("font-size", 14);
...

我的尝试：



i绑定视频作为iframe，但不起作用

What I have tried:

i am tying append video as a iframe, but doesnt work

function appendIframe() {

canvas.append("iframe")
        .attr("x", 100)
        .attr("y", 50)
        .attr("height", "315px")
        .attr("width", "560px")
        .attr("src", "https://www.youtube.com/embed/n5NcCoa9dDU")
        .attr("frameborder","0");


        alert("nice");

}

appendIframe();


</script>

提醒我很好，但我没有在d3画布中看到它。

Alert me "nice", but i dont see it in d3 canvas.

推荐答案

你可以使用

<video></video>

元素......但如果你需要视频WITHIN canvas元素你需要一些定位魔法。





以下是与示例的良好链接 [ ^ ]





这是另一个 [ ^ ]





轻松用Google搜索。

element...but if you need video WITHIN canvas element you need some positioning magic.


Here is good link with examples[^]


And here is another one[^]


Easily googled.

这篇关于D3.js附加视频元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！