Skip to main content
_
_tal_
Known Participant
June 22, 2020
Question

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

  • June 22, 2020
  • 1 reply
  • 584 views

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?

    This topic has been closed for replies.

    1 reply

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    June 23, 2020

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

     

    static/videos/my_video.mp4

     

     

    _
    _tal_Author
    Known Participant
    June 23, 2020

    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
    Community Expert
    kgladCommunity Expert
    Community Expert
    June 23, 2020

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices