How to play video in go.Picture?

GoJS
1

I want to play video in go.Picture.

    var src = editingNode.data['videoUrl'];
    var video = document.createElement('video');
    video.autoplay = true;
    video.setAttribute("width", 120*editingNode.data.size);
    video.setAttribute("height", 67.5*editingNode.data.size);
    video.src = src;
    editingNode.findObject('screenshot').element = video;
    editingNode.findObject('screenshot').redraw();

‘screenshot’ is go.Picture.
editingNode.data[‘videoUrl’] = ‘https://vimeo.com/387193565/49e5599b2d’
But above code isn’t working.
just blank screen.
I’m using https://gojs.net/latest/release/go-debug.js.
Thanks

2

I assume “screenshot” is the name of your Picture object.

In a requestAnimationFrame callback you have to call Picture.redraw on all such Pictures in your Diagram and then call Diagram.maybeUpdate.

3

can we use iframe DOM for go.Picture.element property instead of video?
And I implemented your suggestion like below but it didn’t work:

function onClickPlayVideo() {
    var src = 'http://player.vimeo.com/external/85569724.sd.mp4? 
    s=43df5df0d733011263687d20a47557e4';

    var video = document.createElement('video');
    video.autoplay = true;
    video.setAttribute("width", 120*editingNode.data.size);
    video.setAttribute("height", 67.5*editingNode.data.size);
    video.src = src;
    editingNode.findObject('screenshot').element = video;
    window.requestAnimationFrame(function() {
      editingNode.findObject('screenshot').redraw();  
    })
}

Also, there isn’t Diagram.maybeUpdate in gojs api.

And how can we play youtube video in gojs canvas?? Now, I want to play Youtube & Vimeo in canvas.
Can you please send jsfiddle or codepen sample for youtube/vimeo video playing?
Thanks

4

any update plz?

5

Here’s an example, with two videos: https://codepen.io/simonsarris/pen/xxZZYGy?editors=1011

6

Thanks, Simon, Would you let me know how to get direct video file link from youtube/vimeo url?

7

Using our code as a template, what have you tried that has failed?