Videos can't be seen..... HELP

I have been using twine for a while now and using gifs but started trying to use mp4s recently as file size is becoming an issue.

BUT they aren’t showing.

There is space for the video but nothing actually plays. I am trying to get them to autoplay and to loop without controls so they look like gifs but they’re easier to edit and SMALLER!!! The issue is no matter which browser I use and no matter how I format the code I can’t get them to show.

The code I currently have is

<video autoplay loop>
	<source src="MAGIC.mp4" width="400px" type="video/mp4">
</video>

Why doesn’t it work?

I have also tried like this…

<video src="MAGIC.mp4" width="400px" autoplay loop>

And this…

<video src="MAGIC.mp4" width="400px" autoplay loop></video>

Nothing I do works… Help me please…

Twine Version: 2.2.1
Story Format: SugarCube 2.21.0

Most likely the problem is the path is wrong.

As your code is currently, that would only work if you were running the published HTML file and “MAGIC.mp4” was in the same directory as the HTML file.

Additionally, the Twine v2.2.1 editor cannot play videos, so you’ll have to test using the published HTML file anyways. I’d recommend updating to the current version of Twine (currently v2.3.9), where hitting “Play” launches the game within your default browser.

Also, you should make sure the capitalization of any filenames or paths in your code exactly match the capitalization of the actual filenames and paths, since if they don’t match then that will cause problems on non-Windows machines.

Furthermore, if you’re attempting to play this video in your starting passage, then it may start out paused in some browsers due to security reasons. To get around that, simply put up a “splash page” or something the user has to interact with before the video is displayed, and then it will work fine.

Another thing to be aware of is that MP4 is merely the container format. You’ll also want to make sure that the compression format you use is H.264 (also known as AVC or AVC1) for the video. And if there’s audio, then AAC is the recommended compression format for the audio.

If all of that is fine, then the first or last code examples you showed should work. If they don’t, then open the “Developer Tools” window in your browser to see if an error message is displayed in the console window when you are on that passage.

That all said, if you want to make it so that it also works when launching the game from the current version of Twine when hitting the "Play" button, click the arrow on the left to see the contents of this spoiler.

First, I’d create a “videos” directory in the same directory as the HTML file, and move the video into that directory.

Then you can add this to your game’s JavaScript section:

if (hasOwnProperty.call(window, "storyFormat") || document.location.href.toLowerCase().includes("/temp/")) {
	// Change this to the path where the HTML file is
	// located if you want to run this from inside Twine.
	setup.Path = "C:/Games/MyGame/";  // Running inside Twine application
} else {
	setup.Path = "";  // Running in a browser
}
setup.ImagePath = setup.Path + "images/";
setup.SoundPath = setup.Path + "sounds/";
setup.VideoPath = setup.Path + "videos/";

and replace "C:/Games/MyGame/" with the path to the HTML game file on your computer (make sure you use slashes “/”, not backslashes “\”, in that string).

Then, for the passage where you want to play the video, you’d do this:

<video @src="setup.VideoPath + 'MAGIC.mp4'" width="400px" autoplay loop></video>

That will make it so that it works, both from the compiled HTML file and when launched from Twine v2.3.0+ by hitting the “Play” button.

Hope that helps! :grinning:

This has been mentioned a couple of times recently, but it’s not accurate. Both MacOS and Windows now use case-insensitive filesystems by default. It’s only Linux where case mismatches cause problems.

Note that most web hosting services are Linux (or BSD, also case-sensitive). So you should still be careful about capitalization in paths, because you will probably upload your game to a web host someday.

I don’t know about that. I give this advice precisely because I’ve seen Mac users who’ve had trouble viewing images in games because the capitalization didn’t match, and fixing the capitalization fixed their problems.

Regardless, matching the capitalization is still strongly recommended.

I am entirely sure about the filesystem.

% echo Hello > testfile
% cat TestFile
Hello
% cat TESTFILE
Hello

This has been true since OSX shipped twenty years ago. And it’s also true of links in HTML files, both viewed via file: URLs and via a local webserver.

(You can configure a Mac filesystem which is case-sensitive, but you have to jump through hoops. Obscure hoops.)

I would like to see an example of this going wrong so I can figure out where it’s going wrong…

I tried to find one, but the site where I recall this happening doesn’t let you search on terms with three letters or less, so searching on “Mac” or “OSX” doesn’t work. From the searches I tried, I couldn’t find an example.

So, you could be right. I appreciate the correction.

Thanks for checking. If it happens again, maybe we can figure it out.

From which version onwards?

Every version, actually. Classic HFS was case-insensitive (but case-preserving) from the System 6 and System 7 days. OSX 10.0 maintained that tradition. The option to create a case-sensitive HFS+ volume was added in 10.3, but essentially nobody used it, unless they were trying to run some gnarly Unix software that required case distinctions in filenames.

1 Like

I know images and videos cant be seen when testing and needs to be saved as a html before they appear but even then it won’t show.

and the path is definitely correct, I have a kept all files in the same place as the gifs and the path of the gif works so the video is in the right place.

As I mentioned before, did you check to see if any error messages showing up in the console window when you open the Developer Tools window?

This is what appears in the console

Hopefully that’s what you’re asking about. Not that it makes much sense to me but I think it’s probably the fact that the file can’t be decoded… I’m viewing on win10 in firefox and chrome and both come up the same so I’m lost

Also Windows media player opens the file fine and plays instantly so it is the right file type and it’s also not corrupted or anything

That’s telling you that the video was encoded in a format that your browser does not support. The fact that it plays in Windows Media Player (WMP) is mostly irrelevant, since browsers don’t use the same codecs as WMP.

You might want to use MediaInfo to take a look at that video to see what video and audio codecs are needed to play that MP4 file.

Remember what I said before:

All that means is that you’ll need to reencode the video using the proper codecs if you want the video to be able to play in the browser.

If you want a metaphor to explain it, your browser can basically read books (MP4 files) written in English, Spanish, and German (various compression formats), and you’ve handed it a book written in Japanese, so all it can do is throw its hands up in the air and tell you that it can’t read it. The fact that something else can read that book written in Japanese doesn’t change the fact that the browser can’t.

Hopefully that clears up what’s going on. :grinning:

1 Like

MediaInfo is a great program. But is there an easy way to convert a file from H.263 to H.264?

Appreaciate if not but you don’t know if you don’t ask!!

There are a bunch of video conversion tools out there. I’ve used VSDC’s Video Converter tool to do that before.

Hope that helps! :grinning: