HTML Variables for images and videos using Twine

[RustyShacklefordVenture]

I'm working on a dating game (with extremely limited Twine knowledge ) where I want videos and images to appear depending on the girl currently on a date. Variables are set with $date.name and $date.lastname.

I want to use folder paths like the following
girls/FirstnameLastName/video1.mp4

However I can only display media from the first folder using

[img["girls/"+$date.name + "dinner.jpg"]]

<video src="girls/dance.mp4" width="800" autoplay loop muted></video>

and have unsure how to write code to move past the first folder. I have tried using the paths girls/Firstname and girls/Firstname LastName using incorrect code and can't find any info on how to do this.

Bad code used:
[img["girls/"+$date.name/+$date.name + "facial.jpg"]]

<video src="fake/"+$date.name/+$date.name + "facial.mp4" width="800" autoplay loop muted></video>

Any help would be greatly appreciated.

 

[Nagozo]

If I'm understanding your issue correctly, you want to use a video which is located two folders 'deep', right?
In that case, your code isn't far off. You just need the separator / before the file's name, to indicate that it's in a deeper folder.

For example (notice the / before the video's name):
_pathname = "girls/" + $date.name + $date.lastname + "/video1.mp4"
In general, you want your pathname to be a string of the format topFolder/folder2/.../lastFolder/file.ext

 

[RustyShacklefordVenture]

This is seriously bugging me. I've gotten images to load but not videos. I'm using the line below and that's the result displayed instead of the video.

<video src="girls/" + $date.name + $date.lastname + "/strip.mp4" width="800" autoplay loop muted></video>

 

[Alcahest]

This is seriously bugging me. I've gotten images to load but not videos. I'm using the line below and that's the result displayed instead of the video.

<video src="girls/" + $date.name + $date.lastname + "/strip.mp4" width="800" autoplay loop muted></video>

Try this:

<video width="800" autoplay loop muted>
    <source src="girls/" + $date.name + $date.lastname + "/strip.mp4" type="video/mp4">
</video>

 

[guest1492]

If you intend to set inline attributes of HTML elements using variables, you need to use

You must be registered to see the links

.

 

[RustyShacklefordVenture]

No, that doesn't work. There's a blank space the size of the video but when I open it in a new tab, it shows me background.jpg

These are the pats I'm trying to use:
girls/FirstnameLastname/video.mp4
or
girls/Firstname/video.mp4

Images work with those paths, I jus't cant figure out the code for videos. Typing the video url in the browser works BTW.

Try this:

<video width="800" autoplay loop muted>
    <source src="girls/" + $date.name + $date.lastname + "/strip.mp4" type="video/mp4">
</video>

 

[Alcahest]

No, that doesn't work. There's a blank space the size of the video but when I open it in a new tab, it shows me background.jpg

These are the pats I'm trying to use:
girls/FirstnameLastname/video.mp4
or
girls/Firstname/video.mp4

Images work with those paths, I jus't cant figure out the code for videos. Typing the video url in the browser works BTW.

Yeah, I didn't account for variables in the path. Something like this should work:

<<set _vidpath = "girls/" + $date.name + $date.lastname + "/strip.mp4">>
<video width="800" autoplay loop muted>
    <source @src=_vidpath type="video/mp4">
</video>

But it's easier to make a widget that takes care of it than having to type all that every time.

 

[RustyShacklefordVenture]

Thanks, that works. Widgets are going to take time foe me to familiarize myself with.

 

[PTSdev]

Widgets are really easy to use. Here's a very simple video display widget based on the code above:

<<widget "showvid">>
<<set _vidpath = "girls/" + _args[0] + _args[1] + "/" + _args[2] + ".mp4">>
<video width="800" autoplay loop muted>
<source @src=_vidpath type="video/mp4">
</video>
<</widget>>

The arguments are:
_args[0] = $date.name
_args[1] = $date.lastname
_args[2] = name of the video file

You call the widget like this:
<<showvid "Laura" "Miller" "strip">>

You can also call it by using the variable names:
<<showvid $date.name $date.lastname "strip">>

Theoretically, you can simplify the thing if $date.name and $date.lastname are always present:
<<widget "showvid">>
<<set _vidpath = "girls/" + $date.name + $date.lastname + "/" + _args[0] + ".mp4">>
<video width="800" autoplay loop muted>
<source @src=_vidpath type="video/mp4">
</video>
<</widget>>

Calling it:
<<showvid "strip">>

Imho, it's great for the UX if you add some settings for videos. Look up the Settings API documentation for Sugarcube. Some people prefer muted videos, others want sound. You can add a settings toggle in your JavaScript section and an if statement in the video widget.