JavaScript Syncing videos?

[KittenKatja]

I'd like to sync two videos.
One is behind the other video and has the blur filter.
Currently, ontimeupdate="if(this.currentTime == 0){let a = document.getElementById('background_blur');a.currentTime = 0;a.play()}" only works, if the video has sound, and is not muted.
Would canvas safe some ram by taking the foreground video's frame input and output onto the canvas?

Spoiler: Bonus

I'd like to download a file from an external source with a left click on an element. As far as I know, the download tag only allows same-origin sources to be downloaded, there's also a way to download using blob, but I don't know anything about that.

 

[Antero360]

I'd like to sync two videos.
One is behind the other video and has the blur filter.
Currently, ontimeupdate="if(this.currentTime == 0){let a = document.getElementById('background_blur');a.currentTime = 0;a.play()}" only works, if the video has sound, and is not muted.
Would canvas safe some ram by taking the foreground video's frame input and output onto the canvas?

Spoiler: Bonus

I'd like to download a file from an external source with a left click on an element. As far as I know, the download tag only allows same-origin sources to be downloaded, there's also a way to download using blob, but I don't know anything about that.

Personally, I've never had the need to do this, but this does sound like an interesting topic to learn from . Did a bit of digging, and found this article on video syncing.

HTML5 Video: Synchronizing Playback of Two Videos - client side, design, performance, web applications - Bocoup

Web Platform Consulting Services

bocoup.com

Hope it helps

 

[Antero360]

In regards to your bonus question, you would need to link to the external source just like you would with an anchor tag, and give it the download attribute.
Something to the effect of:

<a href="https://linkToExternalSource" download>Download Me!</a>

for reference: https://stackoverflow.com/questions/13451720/force-external-download-url

 

[KittenKatja]

I don't want to sync 2 videos as often as the browser allows me, once every start of the video is enough for me, because that seems to be the only time when the two videos go async. But I also want to sync 2 mute videos.

Spoiler: Bonus

Your example only makes it open the link, not give me a download prompt or have a file name suggestion already in it.
Blob is at the bottom, can't you explain how that works instead?

 

[Antero360]

I don't want to sync 2 videos as often as the browser allows me, once every start of the video is enough for me, because that seems to be the only time when the two videos go async. But I also want to sync 2 mute videos.

Spoiler: Bonus

Your example only makes it open the link, not give me a download prompt or have a file name suggestion already in it.
Blob is at the bottom, can't you explain how that works instead?

To answer your bonus: If you want to give a suggested file name to the file, all you have to do is set the download attribute to whatever filename you wish to suggest:

<a href="https://pathToFile" download="always-checkout-references-given.exe">Download ME</a>

How To Prompt The User To Download A File

Sometimes we just want to download an image file instead of opening it in the browser. For these situations we can use the download attribute. In this article we’ll learn how to use it and how we can automate its behavior with JavaScript.

pqina.nl

Spoiler: BONUS

Right from that stackoverflow article I referenced

 

[Antero360]

IF you wish to have a popup with an "actual" prompt, then some js magic is involved. At this point, you have a couple of options.
1) have a button "download me" open up a modal that asks the user to download, and hook up the download event to the "OK" button inside of the modal

OR...hear me out

2) have an alert box that does the same thing

 

[KittenKatja]

Spoiler: Bonus

I think you're not digging enough.
The same-origin policy disallows websites to prompt a download from another website, that means I can only download files that are already on my computer, because the local file has its origin on my computer.
Instead of opening the download file prompt, it will instead open the hyperlink, and since only the download tag is specified and not the target, it will open in that tab.
Blob goes around same-origin by downloading the file into cache first, but I don't know how to use blob. (I thought a security analyst would know about that policy)

 

[Antero360]

Spoiler: Bonus

I think you're not digging enough.
The same-origin policy disallows websites to prompt a download from another website, that means I can only download files that are already on my computer, because the local file has its origin on my computer.
Instead of opening the download file prompt, it will instead open the hyperlink, and since only the download tag is specified and not the target, it will open in that tab.
Blob goes around same-origin by downloading the file into cache first, but I don't know how to use blob. (I thought a security analyst would know about that policy)

Fully aware of CORS. When it comes to that, a bit of js magic should help. In your GET call, add the attribute to handle CORS.

 

[Antero360]

Fully aware of CORS. When it comes to that, a bit of js magic should help. In your GET call, add the attribute to handle CORS.

 

[Ordep-20]

Is video in MP4 or youtube???

Here try this code

<video height="180" width="300" id="a" controls>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.ogv"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.webm"></source>
</video>
<video height="180" width="300" id="b">
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.mp4"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.ogv"></source>
<source src="https://videos.mozilla.org/serv/webmademovies/popcorntest.webm"></source>
</video>

<input type="range" value="0" id="scrub" />

//USE jQuery edge

var videos = {
    a: Popcorn("#a"),
    b: Popcorn("#b"),
  },
  scrub = $("#scrub"),
  loadCount = 0,
  events = "play pause timeupdate seeking".split(/\s+/g);

// iterate both media sources
Popcorn.forEach(videos, function(media, type) {

  // when each is ready...
  media.on("canplayall", function() {

    // trigger a custom "sync" event
    this.emit("sync");

    // set the max value of the "scrubber"
    scrub.attr("max", this.duration());

    // Listen for the custom sync event...   
  }).on("sync", function() {

    // Once both items are loaded, sync events
    if (++loadCount == 2) {

      // Iterate all events and trigger them on the video B
      // whenever they occur on the video A
      events.forEach(function(event) {

        videos.a.on(event, function() {

          // Avoid overkill events, trigger timeupdate manually
          if (event === "timeupdate") {

            if (!this.media.paused) {
              return;
            }
            videos.b.emit("timeupdate");

            // update scrubber
            scrub.val(this.currentTime());

            return;
          }

          if (event === "seeking") {
            videos.b.currentTime(this.currentTime());
          }

          if (event === "play" || event === "pause") {
            videos.b[event]();
          }
        });
      });
    }
  });
});

scrub.bind("change", function() {
  var val = this.value;
  videos.a.currentTime(val);
  videos.b.currentTime(val);
});

// With requestAnimationFrame, we can ensure that as
// frequently as the browser would allow,
// the video is resync'ed.
function sync() {
  if (videos.b.media.readyState === 4) {
    videos.b.currentTime(
      videos.a.currentTime()
    );
  }
  requestAnimationFrame(sync);
}