Vizualizácia s D3.js + problem s videom z YT

Vizualizácia s D3.js + problem s videom z YT

Duch

13. 4. 2016 #1

Zdravím,

mám tu problém. Pracujem na vizualizáciu dynamického obsahu ako je text, obrázok a video. Obrázok a text pracujú dobre, ale video mi nechce pridať. Malo by sa to robiť cez iframe, ale aj tak mi to nechce zobrazovať v mojom canvase. Poradí mi niekto?

<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);
...


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>

zobrazí mi alert, ale video na ploche nevidím. Nejaké nápady?

Nahlásit jako SPAM

IP: 158.255.26.–

NeregistrovanyHookyns

~ Anonymní uživatel
~ 62 příspěvků

18. 4. 2016 #2

Nemůžeš ten iframe házet přímo do SVG, protože SVG iframe neobsahuje. Musíš jej vložit do foreignObject.

Tzn. aby si ve výsledku dostal:
<foreignObject x="0" y="0" width="600" height="400">
<body xmlns="http://www.w3.org/1999/xhtml">
<iframe src="http://google.cz" style="width:600px; height:400px"></iframe>
</body>
</foreignObject>

Nahlásit jako SPAM

IP: 195.178.73.–