How can I embed a local video into an HTML5 Project?

[_tal_]

I have an HTML5 project in Adobe Animate.

I drag the video component onto it, and set the source of the video. Seems pretty straight-forward.

The problem I'm having is this:

• Something like http://my_domain.com/some_path/my_video.mp4
  • Works great
• Something like: /static/videos/my_video.mp4
  • Does not work

If I don't know my domain name ahead of time, or it happens to be different in my dev environment and my production environment, it's very useful to use a relative path rather than an absolute URL, but no matter what I enter into the source as a relative path, the file that Animate generates has the source as "videos/my_video.mp4". 

I can change the filename of the video it will look for, but the path will always be videos/. I can enter just the filename as the source, or some path like /my/videos/some_dir/my_video.mp4, and Animate will still generate a source of "videos/my_video.mp4", ignoring everything except the filename portion of what I entered as the source.

Is this a bug? Am I doing something wrong?

[kglad]

if my_video.mp4 is in the subfolder (that contains the published html) static/videos, use:

static/videos/my_video.mp4

[_tal_]

Using the literal string "static/videos/my_video.mp4" as the source of the video, the browser dev tools network tab shows the request going out to http://my_ip/videos/my_video.mp4.

The browser Inspector tool also shows this:

<video ... src="videos/my_video.mp4" ...></video>

Caching is disabled in the browser, so this is definitely not just a cached page. 

Using Adobe Animate 20.0.3.

Currently using the workaround of making my web server redirect requests for videos/ to static/videos/, but it would be nice if I didn't have to work around this issue.

[kglad]

i don't know what you're doing wrong but must be doing something wrong.

1. restart your computer.

2. save your fla with a new name to a new folder and use the default publish settings.

3. with your file browser create static/videos subfolder in that new folder

4. copy my_video.mp4 to that new folder/static/videos folder.

5. open the new name fla

6. select your video component on stage

7. open the component properties panel

8. open the content path panel from the component properties panel (the pencil icon)

9. open the browse for file window from the content path panel (by clicking the folder icon)

10. navigate to the newly created subfolders and select my_video.mp4

confirm that was all done correctly because you see the video's metadata being loaded into animate and then test.

[_tal_]

Using the folder icon to select the video (as you suggested), rather than just typing in an absolute or relative path, when I select my video file, the path becomes an absolute directory path, rather than a relative or absolute URL. Ex on my Mac:

/Users/tal/Documents/my_project/static/videos/my_video.mp4

When I publish, this still sets the video source to:

<video ... src="videos/my_video.mp4" ..></video>

but the network tab of the browser dev tools shows the request going out to static/videos/my_video.mp4.

Not sure what sort of witchcraft is going on there that the video sources isn't where the request is being made to, but it seems to work.

I'm guessing that when you set the video component's source in Adobe Animate, it tries to figure out if it's an absolute URL, a file path, or a URL relative path, and is getting confused by "static/videos/my_video.mp4". Using a file path, it generates something that works. Not sure why the video source still looks wrong, but it does seem to work.

Thanks