Member 12456835 Ответов: 1

D3.js добавить элемент видео


Привет,

я использую d3.js для создания слайд-шоу, динамический. Тексты и изображения работают правильно, но, с другой стороны, я не знаю, как добавить видео. Есть идеи?

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


Что я уже пробовал:

я привязываю append video как iframe, но не работает

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.

Richard Deeming

Вы не можете положить <iframe> внутри а <canvas>.

Member 12456835

Я использую D3, не могли бы вы привести мне какой-нибудь пример?

1 Ответов

Рейтинг:
2

Sinisa Hajnal

Вы могли бы использовать

<video></video>
элемент...но если вам нужно видео внутри элемента canvas, вам нужна некоторая магия позиционирования.


Вот хорошая ссылка с примерами[^]


А вот еще один[^]


Легко гуглить.