Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Video not playing #23

Open
DariusLLL opened this issue Aug 22, 2019 · 9 comments
Open

Video not playing #23

DariusLLL opened this issue Aug 22, 2019 · 9 comments

Comments

@DariusLLL
Copy link

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
Copy link
Contributor

@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
Copy link
Author

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

@laggingreflex
Copy link

@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
Copy link
Owner

tungs commented Aug 26, 2019

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
Copy link
Author

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
Copy link

adamdama commented Dec 12, 2019

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
Copy link

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
Copy link

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
Copy link

Kwon11 commented Feb 8, 2023

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants