Video hosting platform

[VJ33]

Hi

I'm currently writing an adult interactive fiction full of sex scenes and interesting content. I'm using Twine to create the game and in order to add video clips I need upload them to a website that gives them URL address and then I add that into HTML line (you know what I mean).

I've found a hosting platform for images I'm using and now I need one for the videos. Do you have any recommendations about a site like that?

PS: I'm not that far from uploading the version I currently have to a certain website for all of you to enjoy.

 

[GNVE]

Why not include the video's/images in the game file? you can use the local address as URL.

 

[VJ33]

Why not include the video's/images in the game file? you can use the local address as URL.

You mean using the full video from the original website?

I'm cutting the original video into smaller clips and then I want to add those clips to a write line in Twine, 4-5 in one scene. Then it fits better.

Also, what is the host platform of this link -

You must be registered to see the links

I've seen this part -

You must be registered to see the links

- for other games too but when I open it, it shows an error.

 

[anne O'nymous]

You mean using the full video from the original website?

No, that's not what GNVE mean.

Twine permit you to distribute all content (images and videos) as local content that will be distributed with all the other game files (through "file://" protocol I guess). I'm sure that it's wrote in the doc.

That way, no need for the developer to search for a hosting site, and for the player to have to connect to Internet. Plus no risks to have an unplayable game because the hosting site nuked your content, or simply disappeared.

 

[JakaiD]

It should be as simple as using a "

You must be registered to see the links

" to the content. "Absolute path" is when you enter the whole path for example "c:/folder/folder/file" or "https://some_url/"

So with that said you would do something like this.

<video src="videos/video.webm" width="640" height="480"></video>

if you had a folder structure like this and is trying to access the video from the "story.html" file.

C:\mystory\
    videos\
        video.webm
    story.html

 

[VJ33]

It should be as simple as using a "

You must be registered to see the links

" to the content. "Absolute path" is when you enter the whole path for example "c:/folder/folder/file" or "https://some_url/"

So with that said you would do something like this.

<video src="videos/video.webm" width="640" height="480"></video>

if you had a folder structure like this and is trying to access the video from the "story.html" file.

C:\mystory\
    videos\
        video.webm
    story.html

Honestly, everything you just said, and I appreciate that you did, went over my head.

Can you explain that to me like I'm a five-year-old? Where do I need to start? Do I need to download anything?

 

[GNVE]

Well If you need to write a letter you write:
Street, Number, Zip code, City. This is an absolute address. It can be handy when there is no context. Like when you want to visit a website. You need an exact address to get there.
Now imagine inviting your friend over. You just say I live in street on number. this is a relative address. There is context already there. Your friend knows what city you live in so no need for the full address.

When looking at the code for your game a hardcoded address for a game is great for image URL's on the web. You need the game to go to that exact location to get that exact image so the game can explain it. Trouble is if like anne O'nymous said the image host removes your image file or adjust its code so the URL is different. It will literally break your game. Fixing will mean updating every broken image one at a time. I.e. it is not fun nor efficient.
What most games do is store the game assests (images, video's, text) on the computer of the person who plays the game. In that case it would be impractical to hardcode the full location of each image. You might have the image file stored in C:\Game\Images\Image.PNG. I have it in C:\Program Files\GameImages\Image.PNG and a third person has it on their D drive.
So what programmers decided was that is was reasonable to assume that all game assets are stored together. So when you use a relative address you only need to reference Images\Image.PNG

The link in the JakaiD post shows you how to properly make those relative links. So no you do not need to download anything. If it is still unclear I suggest looking at the file structure of a similar game. You'll see that most of them have an image folder or the like.

 

[VJ33]

Well If you need to write a letter you write:
Street, Number, Zip code, City. This is an absolute address. It can be handy when there is no context. Like when you want to visit a website. You need an exact address to get there.
Now imagine inviting your friend over. You just say I live in street on number. this is a relative address. There is context already there. Your friend knows what city you live in so no need for the full address.

When looking at the code for your game a hardcoded address for a game is great for image URL's on the web. You need the game to go to that exact location to get that exact image so the game can explain it. Trouble is if like anne O'nymous said the image host removes your image file or adjust its code so the URL is different. It will literally break your game. Fixing will mean updating every broken image one at a time. I.e. it is not fun nor efficient.
What most games do is store the game assests (images, video's, text) on the computer of the person who plays the game. In that case it would be impractical to hardcode the full location of each image. You might have the image file stored in C:\Game\Images\Image.PNG. I have it in C:\Program Files\GameImages\Image.PNG and a third person has it on their D drive.
So what programmers decided was that is was reasonable to assume that all game assets are stored together. So when you use a relative address you only need to reference Images\Image.PNG

The link in the JakaiD post shows you how to properly make those relative links. So no you do not need to download anything. If it is still unclear I suggest looking at the file structure of a similar game. You'll see that most of them have an image folder or the like.

Sorry, I must be dumb but I didn't get any of that. I read it several times and even tried to do it as I understood it but nothing. Hardcoded address? Storing game assets to other person's computer? Relative address? Absolute address? Those terms are new to me.

So far I've had to download every image and video that I've wanted. I uploaded images to an image hosting site and made the folder public so everyone playing the game can see the links. I downloaded videos and cut them into clips. But I couldn't find a way how to add MP4 to HTML, so I converted videos to GIFs and uploaded them the same way I did with the images. This way I have the images I want and moving pictures, so to speak.

The constant downloading and converting and uploading takes time and kind of breaks the flow of writing the story.

Is there maybe a tutorial about that?

 

[anne O'nymous]

Honestly, everything you just said, and I appreciate that you did, went over my head.

Can you explain that to me like I'm a five-year-old? Where do I need to start? Do I need to download anything?

*sigh*
[snip harsh me]
[snip sarcastic me]


There's two way to write an URL (you know what is an URL, right ? If you don't know, well, it's "a link"):

1. the absolute form: http://host.domain.ltd/directory/directory/file.extension
2. the relative form: directory/file.extension

The relative form works like any file directory structure (You know what it is and how it works, right ?).


How and when use one or the other ? It's simple:

• When the file is distant, therefore when it's located on another web site, you use the absolute form.
• When the file is local, therefore when it's located on the same web site, you use the relative form.

What does this mean in your case ? After all, you aren't making a web site, but a game...

Well, the thing is that you are making a web site...
It's what Twine do, it help you build a web site, but a particular web site, that will be a game, and that will be available locally on your computer and, more globally, the computer of anyone who download then play your game.
Therefore, the "how and when" above apply also to your game. "another web site" mean "another game", while "same web site" mean "your game".


So, what does is really mean in your case ?

It mean that you do not have to host your files (images, videos, and also HTML pages) anywhere.
You create a directory, that we will name "c:\my game" for this explanation.
In this directory, you create three new directories, "html", "images" and "videos". What mean that you now have:

• c:\
  • my game
    • html
    • images
    • videos

In the first directory, therefore "c:\my game\html", you put the HTML pages.
In the second directory, therefore "c:\my game\images", you put the images.
In the third directory, therefore "c:\my game\videos", you put the videos.


Now, how to use all this ?
Well, by using the relative links.
If the page "index.html", that will starts your game, use an image named "welcome.jpg", you have this:

• c:\
  • my game
    • html
      • index.html
    • images
      • welcome.jpg
    • videos

Therefore, the file "c:\my game\html\index.html" use the file "c:\my game\images\welcome.jpg".
Put them back to back:
"c:\my game\html\index.html"
"c:\my game\images\welcome.jpg"

There's a common point to both, they are in "c:\my game", it's the base of your site, that is, I remind it, your game. So, let's strip this part, we get :
"html\index.html"
"images\welcome.jpg"

This are the relative path to your files. And like for any directory structure, there's the special directory "..", that mean "go back from one level".
Therefore, seen from the "html" directory, your image is located in the "..\images" directory.

This mean that in your "index.html" file, when you write the <a> tag, or are asked the location of your image, you write "..\images\welcome.jpg".
It's the relative links to it.


And now what ?
Well, now that you have all your HTML pages in the "html" directory, all the images files in the "images" directory, and all the videos in the "videos" directory, and that you have changed all your links to be relative links, you use winzip/rar/7zip/whatever to compress the whole content of "c:\my game".
This archive will contain the HTML pages, the images and the videos. Congratulation, you can now release your game.




*sigh*

 

[VJ33]

*sigh*
[snip harsh me]
[snip sarcastic me]


There's two way to write an URL (you know what is an URL, right ? If you don't know, well, it's "a link"):

1. the absolute form: http://host.domain.ltd/directory/directory/file.extension
2. the relative form: directory/file.extension

The relative form works like any file directory structure (You know what it is and how it works, right ?).


How and when use one or the other ? It's simple:

• When the file is distant, therefore when it's located on another web site, you use the absolute form.
• When the file is local, therefore when it's located on the same web site, you use the relative form.

What does this mean in your case ? After all, you aren't making a web site, but a game...

Well, the thing is that you are making a web site...
It's what Twine do, it help you build a web site, but a particular web site, that will be a game, and that will be available locally on your computer and, more globally, the computer of anyone who download then play your game.
Therefore, the "how and when" above apply also to your game. "another web site" mean "another game", while "same web site" mean "your game".


So, what does is really mean in your case ?

It mean that you do not have to host your files (images, videos, and also HTML pages) anywhere.
You create a directory, that we will name "c:\my game" for this explanation.
In this directory, you create three new directories, "html", "images" and "videos". What mean that you now have:

• c:\
  • my game
    • html
    • images
    • videos

In the first directory, therefore "c:\my game\html", you put the HTML pages.
In the second directory, therefore "c:\my game\images", you put the images.
In the third directory, therefore "c:\my game\videos", you put the videos.


Now, how to use all this ?
Well, by using the relative links.
If the page "index.html", that will starts your game, use an image named "welcome.jpg", you have this:

• c:\
  • my game
    • html
      • index.html
    • images
      • welcome.jpg
    • videos

Therefore, the file "c:\my game\html\index.html" use the file "c:\my game\images\welcome.jpg".
Put them back to back:
"c:\my game\html\index.html"
"c:\my game\images\welcome.jpg"

There's a common point to both, they are in "c:\my game", it's the base of your site, that is, I remind it, your game. So, let's strip this part, we get :
"html\index.html"
"images\welcome.jpg"

This are the relative path to your files. And like for any directory structure, there's the special directory "..", that mean "go back from one level".
Therefore, seen from the "html" directory, your image is located in the "..\images" directory.

This mean that in your "index.html" file, when you write the <a> tag, or are asked the location of your image, you write "..\images\welcome.jpg".
It's the relative links to it.


And now what ?
Well, now that you have all your HTML pages in the "html" directory, all the images files in the "images" directory, and all the videos in the "videos" directory, and that you have changed all your links to be relative links, you use winzip/rar/7zip/whatever to compress the whole content of "c:\my game".
This archive will contain the HTML pages, the images and the videos. Congratulation, you can now release your game.




*sigh*

I can see that is is frustrating, and sorry for that.

No, I don't know what file directory structure is. First time hearing about it, first time coming in contact with it. Maybe it's the terminology. Is is the same thing as a folder directory structure?

This is my first time making a game, using Twine, using HTML to create anything. I watched an entire tutorial on how to use Twine in the first place.

C: is my hard drive right? I open that, create a folder with the name of my game, and in there another three folders with HTML, Images and Videos?

What is "index.html"? The game that I'm creating?

And I connect them using what code? This:
<video src="videos/video.webm" width="640" height="480"></video> Using that there video appears in the page?

What exactly that I add to the HTML folder? The thing I write in Twine? I'm using Twine web browser. How can I then add that into the folder?

And what code do I use to join the paths together?

 

[anne O'nymous]

What is "index.html"? The game that I'm creating?

Like any game engine, Twine expect you to be at least a bit familiar with the programming/description language and technology it use, or at least to learn those language and technology while slowly learning to use the engine itself.

So, you should starts by what is HTML, how HTML works, how to make a web site, and things like that. No needs to know everything, but like for anything else, a basic knowledge is mandatory.

 

[GNVE]

Yeah I have to agree with anne O'nymous Your skill level seems to be to low to have fun working on a game. I would suggest to do an intro course in HTML to learn about the basics of programming. Also I don't know if English is your first language but if it is not a there are courses for HTML available in every language that might make it easier to understand the terminology used.
Before I started my own game I first did simple 2 courses in Python (I wanted to use Ren'py) just to make sure I was familiar with the basics.
It is not that I don't want to help you but the barrier is too high right now to help you effectively. Three people tried to break it down in different ways in the most simple terms they know. In the last post of Anne you where looking at the trees rather than the forest. You are asking exactly the wrong questions for understanding what they said.

 

[VJ33]

Yeah I have to agree with anne O'nymous Your skill level seems to be to low to have fun working on a game. I would suggest to do an intro course in HTML to learn about the basics of programming. Also I don't know if English is your first language but if it is not a there are courses for HTML available in every language that might make it easier to understand the terminology used.
Before I started my own game I first did simple 2 courses in Python (I wanted to use Ren'py) just to make sure I was familiar with the basics.
It is not that I don't want to help you but the barrier is too high right now to help you effectively. Three people tried to break it down in different ways in the most simple terms they know. In the last post of Anne you where looking at the trees rather than the forest. You are asking exactly the wrong questions for understanding what they said.

OK, but thanks for trying. I'm gonna try my own way and see what comes out. My biggest problem so far was adding MP4s to HTML but I solved it (in a way) by turning them into GIFs. I know how to add images using URL codes, YouTube videos, creating different paths i.e creating options for the player to choose from. There's more than one way to skin a cat.

 

[Alcahest]

OK, but thanks for trying. I'm gonna try my own way and see what comes out. My biggest problem so far was adding MP4s to HTML but I solved it (in a way) by turning them into GIFs. I know how to add images using URL codes, YouTube videos, creating different paths i.e creating options for the player to choose from. There's more than one way to skin a cat.

Turning mp4s into gifs is the worst thing you can do. It will increase the file size drastically while reducing the quality. Learn how to add video and other basic things. You'll save a lot of time and energy in the end.

 

[VJ33]

Turning mp4s into gifs is the worst thing you can do. It will increase the file size drastically while reducing the quality. Learn how to add video and other basic things. You'll save a lot of time and energy in the end.

Sure, I'll learn but because it's my first go at creating a interactive fiction, it'll do for now. And I think adding images and creating text is basic enough.

All this talk about relative path and all is confusing. Still no idea how it works.

 

[Rell games]

You have a .html file in your project, it can use online links to display media content for you (images, gifs, videos, audio) or you can use local files on your computer (also called relatives, because it is relative to the location where the HTML file is located). So if you have an image in your folder alongside your .html file, you can display it in your html by using this instead of link: "/example.png". If your image is located in a subfolder, then use something like "/folderName/example.png".

 

[JakaiD]

There is always the option to simply use a different tool if you are not familier with the technical side of things Twine requires.

I assume you are trying to make a Visual Novel? If so, have a look at tools which handle resources and their locations for you and where you have access to various commands without having to code/script anything. As an experienced programmer I do not normally look into these kind of tools and use engines like Unity so excuse if I point you in wrong direction now but perhaps something like Visual Novel Maker might work better for you?

You must be registered to see the links

 

[VJ33]

There is always the option to simply use a different tool if you are not familier with the technical side of things Twine requires.

I assume you are trying to make a Visual Novel? If so, have a look at tools which handle resources and their locations for you and where you have access to various commands without having to code/script anything. As an experienced programmer I do not normally look into these kind of tools and use engines like Unity so excuse if I point you in wrong direction now but perhaps something like Visual Novel Maker might work better for you?

You must be registered to see the links

Thanks for this. As this is my first ever go at making a visual novel, or rather interactive fiction, with Twine, then I learned a bit about using Twine, like adding images with his code -
</style>
<img
src=>
</div>

music, if I need it, YouTube videos by taking its HTML code, making different pathways so the "player" can make different choices which lead to different outcomes, make images all similar size, change text color, changes text font etc.

As I'm doing this the first time, everything is new to me. Every problem I had, I Googled the answer. The problem which took me the most time was adding a video or MP4. I solved that by turning the video clips into GIFs. Sure, it may not be the way to go, but I have time to learn. In the future, more of the things I create are more like games and less like novels.

 

[guest1492]

I don't know if you're still using Twine, but I think part of the reason for your problem is that you are using the Twine editor and then pressing "Play" or "Test". Playing from the editor creates an html file in your temporary folder so it's not going to be the same as your final file structure. Use "Publish to File" in the editor instead and then save the file in the correct destination folder.