Homebrew RELEASE HTML-Video-Template NX

[OkazakiTheOtaku]

HTML-Video-Template NX

This is not a standalone project. It is for use with HomebrewWebFramework (can't link it here).

This provides a simple framework for making easy to use installable video players for Nintendo Switch. Videos are (obviously) not provided, but easy to make and instructions can be found under the Encoding header.

If you just want to get up and running, head down to the Usage section and get going. If you want to preview what it looks like on the Switch console, go to the Preview section.

Features

• Made in simple HTML with no copyrighted/SDK tools, so it can be used if a non-SDK html to .nsp maker comes out
• Responsive and customizable GUI that looks great on the Switch's screen
• Slots for up to 12 videos on a page
  • Later on, this will support more slots on a page, and a configurable second page
• Titles for each video on the main GUI
• Descriptions for each video on the main GUI
• Icons for each video on the main GUI
• Centered banner at the top for the title of the collection
• Template .bmp images for the Horizon app icon

Usage

Spoiler

1. Find and download XorTroll's HomebrewWebFramework.

• I can't link it here, but the word on the streets is that you can find it on a specific Discord.

1. Download the latest release from GitHub
2. Edit the headers and descriptions in index.html to suit your needs

• Individual Video Headers are located at:
  • Line 34
  • Line 40
  • Line 46
  • Line 52
  • Line 58
  • Line 64
  • Line 70
  • Line 76
  • Line 82
  • Line 88
  • Line 94
  • Line 100
• Episode descriptions are located on the line directly below the header

1. Edit the individual images

• These are located in the img directory and are named corresponding to the video number.
• They are 140x140 .png files and support transparency
• If you just replace the files without changing the filename, no HTML editing will be necessary

1. Edit the banner image at the topic

• This is img/banner.png and is a 1280x140 .png that supports transparency
• If you replace the file without changing the filename, no HTML editing will be necessary

1. Edit the attribution at the bottom

• At line 122 in index.html there is a space to put your name in, if you so choose.
• I would appreciate if you left the Template credit there, too

1. Edit the videos

• These are located in the vid directory
• The filenames correspond to the same numbering for the headers and images. Just replace the video files and you're good.
• See the Encoding section of the readme for the most reliable results.

1. Package into a .nsp

• Load the project directory into HomebrewWebFramework
• For an app icon, use a 24-bit 1024x1024 .bmp file
  • If you don't know how to make these, or just want to test the project without making an icon, sample ones are provided in the release.

1. Install using Tinfoil

• I don't care whether you use ReiNX or SX OS, or whatever. But you should use Tinfoil rather than SX's installer.

Encoding
Follow these directions to make the most reliable videos.

The recommended tool is Handbrake. Enable these settings, and optionally make a preset for easier encoding.

• Set video resolution to 1280 x 720 (larger sometimes crashes the browser)
• Enable the "Web Optimized" setting
• Output as .mp4
• If using subtitles, make sure to choose the "burn-in" option.
• Only encode one audio and video track into the file

Preview

Here is an example of what someone has made, of the show Oshiete! Galko-chan

FAQ and Troubleshooting

Q: Why can't you link to HomebrewWebFramework?

A: GBATemp rules.

Q: The NSP keeps freezing my Switch when it is launched. What do?

A: Make sure to enable the "select user on launch" option in the builder.

Q: Tinfoil says that the NCA is invalid. What do?

A: Try building with another keygen. 4.0.1-4.1 works well in my experience.

Q: HomebrewWebFramework is crashing. What do?

A. Make sure your app icon is a 24-bit .bmp.

 

[DarkUnixOs]

Wow thats Awesome!!

Are u relesing the html?

 

[Vaatu]

This is amazing! Good work, I expect so many media players to be made now because of this. Let the anime players commence

 

[OkazakiTheOtaku]

Wow thats Awesome!!
Are u relesing the html?

The HTML is the framework. The GitHub releases are just packaged snapshots of the repo and source that I know work 100%.

This is amazing! Good work, I expect so many media players to be made now because of this. Let the anime players commence

Thank you! Hopefully this enables people to more easily use the great tool by @XorTroll . I've had lots of fun and success with HomebrewWebFramework, and so I just kinda decided to publicly release what I made for myself.

 

[Vaatu]

The HTML is the framework. The GitHub releases are just packaged snapshots of the repo and source that I know work 100%.

Thank you! Hopefully this enables people to more easily use the great tool by @XorTroll . I've had lots of fun and success with HomebrewWebFramework, and so I just kinda decided to publicly release what I made for myself.

Very cool! I ran into a few hiccups but managed to figure out what they were so this will help newer builders for sure! Have you released any NSPs you have made to the aforementioned discord?

 

[OkazakiTheOtaku]

Very cool! I ran into a few hiccups but managed to figure out what they were so this will help newer builders for sure! Have you released any NSPs you have made to the aforementioned discord?

Would possibly like to, but I'm not sure who I'd get in touch with to do that. Also not sure how I feel about distributing something like that. I'm more comfortable with providing a template for others.

What kind of hiccups did you run into, btw? So I can fix.

 

[Vaatu]

Would possibly like to, but I'm not sure who I'd get in touch with to do that. Also not sure how I feel about distributing something like that. I'm more comfortable with providing a template for others.

What kind of hiccups did you run into, btw? So I can fix.

I meant I ran into hiccups with the framework by itself, I still haven't used your method yet!

But I will be testing it out and hopefully making some cool anime NSPs (current project is trying to make Hunter x Hunter 2011 divided by each arc, but thats been a pain since there are so many episodes and I cannot find the series in 720p MP4 )

 

[OkazakiTheOtaku]

I meant I ran into hiccups with the framework by itself, I still haven't used your method yet!

Oh, okay, lol.

But I will be testing it out and hopefully making some cool anime NSPs (current project is trying to make Hunter x Hunter 2011 divided by each arc, but thats been a pain since there are so many episodes and I cannot find the series in 720p MP4 )

Under the Encoding section there are instructions for making compatible 720p files, so you can use whatever you find

 

[DollyWhipDoll]

@Nevercholt Will you be making a video tutorial for adding your own movies with this?

 

[OkazakiTheOtaku]

@Nevercholt Will you be making a video tutorial for adding your own movies with this?

Video tutorials aren't ideal since it might change drastically and then make the video tutorial out of date. Is there a way I can make the written tutorial any easier to understand?

 

[Meepers55]

Video tutorials aren't ideal since it might change drastically and then make the video tutorial out of date. Is there a way I can make the written tutorial any easier to understand?

Some people just find video tutorials easier to follow. It's not that your tutorial isn't easy to understand, it's just harder to visualize for some. I'm sure it'll be simpler for everyone to use in the inevitable gui version.

 

[Asia81]

"html" make me doubt.
Is is streaming over wifi (wherre the nsp is just a shortcut), or the video is loaded from nsp itself?

 

[DarkUnixOs]

"html" make me doubt.
Is is streaming over wifi (wherre the nsp is just a shortcut), or the video is loaded from nsp itself?

From the NSP

 

[Vaatu]

"html" make me doubt.
Is is streaming over wifi (wherre the nsp is just a shortcut), or the video is loaded from nsp itself?

It creates an HTML page to use offline. Essentially the file is compiled into an NSP where it opens an HTML page (like you would see on a website) and opens the files locally. No online functionality what-so-ever.

 

[BlackTSQ]

does javascript work aswell? Then it would be really easy to make a video player which automatically detects all files in a folder

 

[Miqote]

does javascript work aswell? Then it would be really easy to make a video player which automatically detects all files in a folder

I tested the example here https://www.w3schools.com/jsref/jsref_regexp_test.asp and it shows true. So yes, it does.

 

[BlackTSQ]

I tested the example here https://www.w3schools.com/jsref/jsref_regexp_test.asp and it shows true. So yes, it does.

Ok thanks, good to know. It's not running an Apache Server or anything similar by any chance to run php code, does it?

You could test that with something simple like <?php> echo "Test" </?>

--------------------- MERGED ---------------------------

Oh, and the *.html needs to be changed into *.php ^^

 

[Miqote]

Ok thanks, good to know. It's not running an Apache Server or anything similar by any chance to run php code, does it?

You could test that with something simple like <?php> echo "Test" </?>

--------------------- MERGED ---------------------------

Oh, and the *.html needs to be changed into *.php ^^

The application (Homebrew Web Framework) requires a index.html to build the NSP. I tried using javascript to forward it to "index.php" via window.location = "index.php"; but it just sat at a loading screen and crashed after about 20? seconds.

 

[Asia81]

Ok, thanks for answer

--------------------- MERGED ---------------------------

Is that "Homebrew Web Framework" part of the switch sdk ?
If not, why can't it be linked?

 

[Miqote]

Good stuff, Okazaki! \ o /

I wrote a GUI tool to modify this HTML code and autogenerate preview images etc from videos, if anyone wants to use it:
https://gbatemp.net/threads/videose...yer-for-watching-stuff-on-your-switch.520986/