search

bbc / VideoContext

An experimental HTML5 & WebGL video composition and rendering API.
http://bbc.github.io/VideoContext/
Apache License 2.0
1.33k stars 157 forks source link

video scaling and quality #56

Closed gossi closed 7 years ago

gossi commented 7 years ago

I give the library a try and it made all my code a lot easier (since I was working around the same issues you had (= no fixed currentTime, etc.)). I followed the basic example, create video context, connect a video node and play, nothing fancy.

Before that, I had a <div> container in which I placed many <video> elements, making one of them active (= hide the others). The <video> elements took up all the space from the surrounding <div>. Videos played on the space are automatically scaled to their own ratio (some had 16:9, others 4:3 but the <video> element was clever enough to arrange it quite fine. Now, instead of the video elements, I have my canvas, which also fits into the surrounding div, however, the videos take the full canvas and because of that become skewed. So I asked for the dimensions of the videos at first and set the width and height of the canvas to fit their ratio.

I feel like I'm doing it wrong as I was also possibly expecting to auto do that for me.

Second (which I thought is a reason of bad scaling) is the quality of the video is lost. I do have a 1080p video but when rendered on the canvas it looks horrible (see screenshot below).

videocontext-bad-quality

How to get the original quality at auto scaling videos?

Thanks a lot.

emshotton commented 7 years ago

Hey gossi,

Check out issue #31 for a solution for how to improve the output quality. (You'll probably need to set the canvas.width = 1920; and canvas.height = 1080; before passing it into the VideoContext constructor.)

Regarding the problem of differing aspect ratios, this is interesting and not something that's come up before. It might be slightly tricky to fix as you could potentially have two videos of differing aspect ratios playing at the same time (for example when transitioning between videos), so setting the aspect ratio of the rendering canvas wouldn't work in that scenario. One potential solution could be to use a scaling effect on the 4:3 video to add black bars to the left and right of the video.

I'll leave this issue open and have a think about potential solutions for the aspect ratio problem and track progress here.

gossi commented 7 years ago

Thank you @MatthewShotton

I come across #31 and was able to get my quality done (something I never would have thought of canvas having different sizes 😉). I will do write my own fit method for now (putting black bars on the sides, when there is more space than video). As this library is built to explicitely display multiple videos at a time and apply effects on it, I realized my original request applies to my situation but not the library in general. Yet, providing the fit() method might be a help here (I will contribute mine then).

For my case, I have different tracks, that can overlap (by time), yet only the topmost track is shown. For fitting the video, I need information about: which video is the topmost at the currentTime and what is the best event I register the callback for to fit the video on the canvas? E.g. video: load, video: play or videocontext: content, videocontext: play, videocontext: update ?!

thanks

emshotton commented 7 years ago

hey @gossi yeah! a fit() utility function could be really useful, let my know how you get on, a pull request would be most welcome!

Regarding the best callback. It would probably be either videonode: loaded (this gets triggered 4 seconds before a video starts playing) or videonode: play (this will get called right before the videonode starts playing).