Highlighted

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

Explorer ,
Jun 22, 2020

Copy link to clipboard

Copied

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:

 

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?

Views

61

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Explorer ,
Jun 22, 2020

Copy link to clipboard

Copied

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:

 

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?

Views

62

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 22, 2020 0
Adobe Community Professional ,
Jun 23, 2020

Copy link to clipboard

Copied

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

 

static/videos/my_video.mp4

 

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 23, 2020 0
Explorer ,
Jun 23, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 23, 2020 0
Adobe Community Professional ,
Jun 23, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 23, 2020 0
_tal_ LATEST
Explorer ,
Jun 23, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jun 23, 2020 0