Video: Add Video extension

[LilyMakesThings]

Video Extension

Simple extension to play video files from URLs. Wip.

Closes #431

Things I WILL NOT add:

• YouTube support

[LilyMakesThings]

This is the only extension I've worked on recently where I've had no idea what the palette was going to look like, so feedback/suggestions from anyone would be greatly appreciated!

[UndermanReal]

Can you explain how this works?

[penta-quark-neutro]

it is extremely impressive.
I loaded my videos and with 350MB I couldn't give it.
1.18GB broke Turbowarp.
It's great.

[CST1229]

Can you explain how this works?

From reading the code, it just seems to put a HTML <video> element on top of the stage canvas, and that's how the video is displayed.

[samuellouf]

Your extension is awesome.

[samuellouf]

But it only works on TurboWarp.

[CubesterYT]

Damn this is insane, I completely forgot the video html tag exists. I thought it wouldn't be possible without an iframe or something.

[LilyMakesThings]

If anyone has any idea why this doesn't work packaged, let me know

[Gaypatapon]

you are a hero

[CubesterYT]

If anyone has any idea why this doesn't work packaged, let me know

I have a theory, A TURBOWARP THEORY. I think the packager only packages the project part of the html only. It omits any other part of the html code when packaging, because all you're doing is making the video element sit on top of the project itself, if the video is going to be packaged, then it needs to be a part of the stage.

[CST1229]

If anyone has any idea why this doesn't work packaged, let me know

I do know that the packager's project player works somewhat differently from vanilla Scratch, so that might be why.

[GarboMuffin]

Something to consider is that you should be able to use a video element in renderer.updateBitmap to upload the current frame (which you could then repeat each frame). It'll be less efficient but you would be able to integrate with the rest of Scratch, same as Skins

[LilyMakesThings]

Something to consider is that you should be able to use a video element in renderer.updateBitmap to upload the current frame (which you could then repeat each frame). It'll be less efficient but you would be able to integrate with the rest of Scratch, same as Skins

I did try this, but I couldn't quite figure it out. And in this case, how would the block palette even look?

[CubesterYT]

This is the only extension I've worked on recently where I've had no idea what the palette was going to look like, so feedback/suggestions from anyone would be greatly appreciated!

Some suggestions, rename "resume video" to "play video", it makes more sense in terms of its functionality. And in terms of new blocks, it would be great if there are blocks that allow you to set a size to the video player and a location to the video player, like "resize video to width height" and "change video x y" something like that.

[BlueToadMakerr]

0.sb3.zip

[samuellouf]

If anyone has any idea why this doesn't work packaged, let me know

I know a way to make your extension work on single html files, .exe files, .app files ...
this.video.style.zIndex=1;

I reality, the video is loaded on the page but it's 𝑥 layers behind the canvas.
I had the same problem with an iframe extension I'm currently coding.

So you can resolve the problem by adding:
this.video.style.zIndex=1;
in the constructor(){} after the video item is created.
It will change the video element's layer.

So, I think it should do the trick.

[LilyMakesThings]

If anyone has any idea why this doesn't work packaged, let me know

I know a way to make your extension work on single html files, .exe files, .app files ... this.video.style.zIndex=1;

I reality, the video is loaded on the page but it's 𝑥 layers behind the canvas. I had the same problem with an iframe extension I'm currently coding.

So you can resolve the problem by adding: this.video.style.zIndex=1; in the constructor(){} after the video item is created. It will change the video element's layer.

So, I think it should do the trick.

I've opted to just rendering it onto sprites now

[LilyMakesThings]

Changes:

• Video now renders with skin API onto the stage (temporary)
• Volume is dictated by the audioEngine's gain node (Scratch Addons)
• Control blocks removed
• Show/hide blocks removed

To do:

• Think of a logical block palette for this extension
  • How are width/height going to be defined?
  • Should multiple videos be allowed to load?
  • How are videos going to render on targets?
    [The obvious answer to all of this is to copy Skins' blocks]
• Somehow clamp the video width/height

---

As much as it is easier to load 1 video at a time, it would be really nice to support multiple videos as if they are skins (also beneficial for the user).

My only problem with this is I want the extension to be easily understood, and any layer of complexity will ruin that. Something to think about. I'll see what works.

[LilyMakesThings]

Changes:

• Updated block palette
• Allows multiple videos to be loaded
• Allows videos to render onto multiple targets

To do:

• Find out why updateAllDrawableProperties doesn't work
• Get the width and height of the video and make a reporter for it
• Update drawables when a video is deleted
• Add more QOL blocks
  • Reporter for loaded videos
  • Boolean for if a video is loaded

Known issues:

• Targets aren't cleared on runtime stop

[LilyMakesThings]

Should I go the extra mile and check if any drawables are visible (ie, shown/hidden) before updating the bitmap? Or is it fine as-is

[GarboMuffin]

Closes #431

[GarboMuffin]

The only strictly backwards-incompatible change I hope I made was merging "get volume of [ ]" into the "get [ ] of [ ]" block that already existed for other things. Otherwise I made it work more in-line with how Animated Text does - update the skin immediately, delay all texture update as long as possible (getTexture()), mark as dirty only when needed.

I'll do some bigger tests tonight with more real videos, trying to get this merged for desktop 1.9.0

[GarboMuffin]

last thing here - does it make sense to wait for the video to load at least a tiny bit before "load video from URL" completes?

[LilyMakesThings]

last thing here - does it make sense to wait for the video to load at least a tiny bit before "load video from URL" completes?

I think so, yes.

[daisytheumbreon-B3]

how do i add a youtube video?

[CubesterYT]

@daisytheumbreon-B3, use the iframe extension for YouTube videos.

[Forysium]

can this extension somehow access local videos? Or is there another extension out there for this?

[CST1229]

can this extension somehow access local videos? Or is there another extension out there for this?

you could probably combine this with the Files extension (unless you mean like putting a video file in the project or next to the project and using that)

[Forysium]

Thank you @CST1229 :D