Back to the Shapespark home page

[API] Video not playing after paused

Hi everyone,

I’m having trouble to play and pause a videotexture created via API. Creating the texture works fine and I can apply the texture to a material. I can play the video by clicking a button and it pauses by clickung the same button again. But after pausing the video, it won’t play again. I can hear the audio playing again, but the videos freezes.

Here is a simple toggle function I tested it with:

function toggleVideo() {
    var tv = viewer.findMaterial("my_tv_material");
    var video = tv.baseColorTexture.video;

    if(video.paused === true) {
        video.play();
    } else {
        video.pause();
    }

    viewer.requestFrame();
    return true;
}

Do you have any ideas? The video element is created via JS.

Greetings

Simon

Could you try if calling play pause on the texture, not a video element embedded within the texture helps? Like:

var videoTexture = tv.baseColorTexture;

if(!videoTexture.isPlaying) {
  videoTexture.play();
} else {
  videoTexture.pause();
}

I already tried, but console says videoTexture.pause is not a function

Can you post how do you create the video texture? Do you use WALK.getViewer().createTextureFromHtmlVideo(videoElement)?

Sure:

var video = document.createElement('video');
video.src = 'URL_TO_VIDEO';
video.muted = true;
video.autoplay = false;
video.id = "MY_VIDEO_ID";

Edit: I tried also to write a video-html element directly into the DOM with same result.

This looks correct, but how do you then put this video in a texture? Something like this should work:

var videoTexture = WALK.getViewer().createTextureFromHtmlVideo(video);
var material = viewer.findMaterial("my_tv_material");
material.baseColorTexture = videoTexture;

That’s exactly the way I did it.

OK, I’m sorry for the confusion, but play() and pause() functions were added very recently and are not yet released. The currently released version has a different API:

if(!videoTexture.isPlaying) {
  videoTexture.isPlaying = true;
} else {
  videoTexture.isPlaying = false;
}

Unfortunately, after the next release this won’t work anymore :confused:

Ok, that seems to work. Thank you for your help. Good to know it won’t work in the future, so I know where to search when something breaks :wink:

Ty and have a nice day.

One more correction: these play/pause functions are already released to Shapespark hosting. To make the code working with both versions you could: