Embedding a video from one of my files?

Question

I want to insert videos into some of my passages, but they're all from my computer folders and I don't know how to get a link from it. I tried copying the path and inserting it in the src part of the <video> code, like so:

<video src="C:\Users\noora\Videos\Movavi Video Suite\Media Content\Video\Start.mepx" width="640" height="480">
</video>

When I tested the story, the video did not appear whatsoever.

I am using story format Harlowe on Twine 2.

Answer 1

Please use the Question tags to indicate the name and full version number of the story format you are using.

The Media formats for HTML audio and video page on the MDN site lists the video file formats supported by the main web-browsers in use, the MEPX file format is not listed there so you will need to convert your video file to one of the listed formats and this article on the Movavi web-site explains one way to do that,

If you want to reference locally stored media files from with your story then you need to use a (Path) Relative URL to do so. This answer to the Not able to set background image question and this answer to the images where/how to link them and what not question touch on this same topic in relation to image based media, but the technique used in both those answers is the same when the media type is video. As is the reason why your video media will only be visible / playable within the story HTML file generated using the Publish to File option, and never visible / playable when using the Test or Play options.

So based on the URL in your example you will need to either:

1. Save your story HTML file within your...

C:\Users\noora\Videos\Movavi Video Suite\Media Content

... folder and then change your video element's src attribute to be the following...

<video src="Video/Start.mepx" width="640" height="480">
</video>

note: Due to historical reasons you need to use a forward slash character to delimit the path in your URL.

 

2. Create a new folder structure to store your media and story HTML files in, something like the following...

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

... then you would be able to use a video element like the following to display it.

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

WARNING:
Unlike Windows some other operating systems are case-sensitive when it comes to the names of folders & files, for this reason it is generally a good idea to not mix uppercase and lowercase letters within those names. There can also be issues with using space characters within the names.

For these reasons the letters in folder & file names are generally lowercase and space characters are generally replaced with either: underscore characters '_' or with the standard dash character '-'

folder/file.png
folder_with_spaces_replaced/file_with_spaces_replaced.png
folder-with-spaces-replaced/file-with-spaces-replaced.png