Git Product home page Git Product logo

Comments (10)

alyssaxuu avatar alyssaxuu commented on May 20, 2024 1

Just downloaded Firefox to test and indeed, the startup video is broken. I did try placing other footage and it went corner to corner though, so I feel it has to be related to how the first video is initialized. Hopefully I can have it fixed soon :)

from animockup.

emilio avatar emilio commented on May 20, 2024 1

Here's an actually reduced test-case @nt1m:

<!doctype html>
<canvas width=500 height=500></canvas>
<br>
<video src="video.mp4" height="2436" width="1124" loop></video>
<script>
onload = function() {
  let video = document.querySelector("video");
  video.currentTime = 2.0;
  document.addEventListener("click", function f() {
    let ctx = document.querySelector("canvas").getContext("2d");
    ctx.transform(0.17793594306049823, 0, 0, 0.17793594306049823, 100, 216.72597864768684);
    ctx.drawImage(video, 0, 0, 1124, 2436, -562, -1218, 1124, 2436);
  });
}
</script>

I haven't dug which one is the right rendering though, I'd file a bug just in case.

from animockup.

alyssaxuu avatar alyssaxuu commented on May 20, 2024

Hmm, odd, is this on load? Will try to replicate to pinpoint the issue. Also would be interesting to know whether it also happens when you upload your own footage. If I recall the initial screen is placed differently to the user-submitted ones so it could have something to do with that.

Going to try to fix this ASAP though!

from animockup.

nt1m avatar nt1m commented on May 20, 2024

I cloned the repository locally and manually uploaded video.mp4 from the repo as "Device screen", and it also displayed broken.

Thanks for looking into this! Please let me know if I can help debug this in any other way :)

from animockup.

alyssaxuu avatar alyssaxuu commented on May 20, 2024

image

This is super odd. Both browsers report the video being the same height and width (those are the numbers showing in the console of both browsers, the first is the width, the second is the height), but in Firefox, the height for some reason looks different. If I try "manually fixing it" by increasing the height, I can manage to make it look full height in Firefox, but then it looks way too long in Chrome.

I have to admit this is sort of driving me mad. What I know is that FabricJs will use width and height amounts simply for cropping the video (so no scaling), and then scaleX/scaleY for increasing and decreasing the width and height respectively. I thought maybe it could have to do with that, maybe with the source video being a different height (e.g. accounting for transparent pixels?), but when I check the original footage's dimensions (prior to the transformation), they also show as the same in either browser.

I'm out of ideas here, it could just be an issue with FabricJs, I'll need to keep researching.

from animockup.

alyssaxuu avatar alyssaxuu commented on May 20, 2024

Okay, I "fixed" the issue by using a browser hack to increase the height of the video in Firefox only. It's not pretty, and it still hasn't led me to the source of the problem, but at least it should work for now. Going to close it as it works, but I will still keep researching why it has this browser disparity.

from animockup.

nt1m avatar nt1m commented on May 20, 2024

@alyssaxuu Thanks for quickly looking into it!
The workaround seems to work for the intro, but if I upload that exact same video as "Device Screen", the video looks squashed again.

I made a quick reduced testcase to try and debug this: Archive.zip

I'll let you know if I find something.

from animockup.

emilio avatar emilio commented on May 20, 2024

I think this is a Chrome bug. If I extract one video frame with ffmpeg and use it as an <img> on the drawImage call, then Chrome renders like Firefox.

from animockup.

emilio avatar emilio commented on May 20, 2024

I filed https://bugs.chromium.org/p/chromium/issues/detail?id=1063683. Safari agrees with the <img> rendering and doesn't support <video> as a drawImage argument.

from animockup.

kintaro1981 avatar kintaro1981 commented on May 20, 2024

the problem on firefox is still there :-(

from animockup.

Related Issues (5)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.