Video not playing

[DariusLLL]

Hi,

Thank you for the wonderful library. It is very useful for us. The only problem is that we can not record html output with video. Video is not playing. We get first frame only. I believe that video recording should be working after you last commit? slidertest.zip

Thanks. Darius

[videowala]

@DariusLLL Chromium does not support MP4 format. You need to use Chrome if you want to record MP4. You can use --executable-path config parameter to use Chrome.

[DariusLLL]

I know that and I used chrome. The same is with .wemb. Darius

[laggingreflex]

@DariusLLL Your slider doesn't use the native <video> tag but some sort of a custom player, maybe that's what's not progressing the video while capturing

[tungs]

Hi @DariusLLL, thanks for filing this. I took a quick look at it, and it does look like the library you're using is adding a video element to the page, but it's unclear to me why you're encountering this issue.

Could you post the simplest version of this issue, with a video that Chromium can play (e.g. a .webm)? That would be very helpful to examine your issue.

[DariusLLL]

Hi Tungs, Thanks for reply. I could not make working sample. I have tried every library options combination. Could be problem is that Slider Revolution library is using iFrame. I have created the simplest slider with wemb video but it still not working. Would be nice when you could solve this problem. Thanks Darius slidertest2.zip

[adamdama]

I am now having an issue with this as well. The page starts with an empty div and then JS kicks in to place the video tag on the page, with something like:

var dVid = document.createElement("video");
    // dVid.setAttribute("id", id);
    var dSource = document.createElement("source");
    dSource.setAttribute("id", id);

    dSource.setAttribute("src", src);
    dSource.type = "video/mp4";
    // dSource.src = src;
    dVid.appendChild(dSource);

    var parentDiv = document.getElementById(id + "Holder");
    parentDiv.appendChild(dVid);

    dVid.autoplay = true;
    dVid.muted = true;

The code is working in chrome without issue but when using timesnap to record it the video never plays. In fact the first frame does not even show.

@tungs btw kudos on the awesome package, this project is super cool!

Edit: I just noticed the post from @videowala above, so maybe this is just an issue because the video is MP4. The version of chromium that we are using has been compiled with proprietary_codecs=1

[adamdama]

I did some more testing and found the following:

• Neither webm nor mp4 files are represented in the screenshots
• This is true whether they are present in the HTML on page load or if they are added via JS after page load

[adamdama]

Further to my last comment, I worked out what the issue was - or at least in our case. I was serving the videos from S3 via an API Gateway proxy and I was missing the following response headers: Accept-Ranges Content-Range

This stopped the video from seeking and so the "seeked" event never fired and the pendingSeekable promise never resolved. As soon as those headers were present on the video file's HTTP response timesnap happily captured all of the frames. So in my case this definitely wasn't a timesnap issue.

[Kwon11]

@adamdama Hi, I'm trying to do something and trying to figure out if you did the same thing.

Were you using timesnap to record javascript animations on top of an MP4 background?

For context in case it helps you help me, I am trying to record lottie animations. from after effects, with an MP4 background of a moving graident design