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!