1

I have 2 videos that I want to be joined as one to have of faster loading experience on the client. That means having to load seperate video data and play them like a play list but with a smooth transition too.

I have two ways of doing it

1. Load streams seperately, spliting them into chunks, comnbining them and making feeding them as source for the video Element.

In experiment 1 I have a few issues.

i. Without the for looped fetch, I can correctly set a single stream to the source of my video BUT when using the loop to fetch each stream seperately, it does not work: - I looked for a way to combine video streams and I found How to use Blob URL, MediaSource or other methods to play concatenated Blobs of media fragments?. However it tackles editing one video - splitting one video and joining back also mentioning that you cant just seperate chunks and combine and expect it to play.

In my case its 2 different, complete videos(even duplicate video files but from different streams). It seems this route is an overkill for my problem. Is there a simpler way, perhaps a library than can help me join these streams and convert them to a blob?

Here is my attempt. Another confusion is the chunks array in my custom hook is still empty after the loop finishes running: Codesanbox Demo 1 - Streams

2. use canvas to draw the videos one over the other in sequence I found a working solution and ported it to react. Here is my demo:Codesandbox Demo 2 - Canvas. The problem I have here is that this ONLY works on safari with a few issues. It does not work at all on other browsers.

Here is the original working solution BUT that same example does not work well when I replace video sources with my urls. Could it be because mine is not .mp4? Check it out here Original Solution on codesandbox.Same code, different source, it also shows me a The index is not in the allowed range. error..

What a I doing wrong in both cases?

I guess No 2 could be a seperate question but I am posting here under the same problem. Lemme know if I should post it seperately.

Thank you in advance

Fatah
  • 2,184
  • 4
  • 18
  • 39

0 Answers0