Embed Local Video in Inline Frame (WMV, AVI, etc.)

[Paul_Axure]

Just did this for someone so I thought I’d share.

1. Open a .txt file

2. Paste this code below where you replace videofilename.wmv with the name of your video. This video must be placed inside the generated prototype’s folder (seen in the generate>prototype dialog). Alternatively you can put it in Dropbox’s public folder, and then right-click the video and select Dropbox > Copy Public URL (EDIT: dropbox might have depreciated this feature).

<OBJECT ID="MediaPlayer" WIDTH="192" HEIGHT="190" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"
STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject">
<PARAM NAME="FileName" VALUE="videofilename.wmv">
<PARAM name="autostart" VALUE="false">
<PARAM name="ShowControls" VALUE="true">
<param name="ShowStatusBar" value="false">
<PARAM name="ShowDisplay" VALUE="false">
<EMBED TYPE="application/x-mplayer2" SRC="videofilename.wmv" NAME="MediaPlayer"
WIDTH="192" HEIGHT="190" ShowControls="1" ShowStatusBar="0" ShowDisplay="0" autostart="0"> </EMBED>
</OBJECT>

3. Save the .txt file as .html inside the generated output’s folder.

4. In Axure, add an inline frame and in the “Link to External URL or File” field, enter the .html file.

5. Generate and test it out.

You can also add the action “open link in frame” so that you can play the video by clicking a button/link (OnClick) or make it play automatically when the page loads (OnPageLoad). You would just need to change the code a bit so that it reads name=“autostart” VALUE=“true”.

If you want to embed a web video like YouTube, see this thread http://www.axure.com/forum/faqs-ultimate-resources-thread/3896-how-embed-youtube-video-into-inline-frame.html

If you’d like to see an example of the .txt and .html files, see this thread http://www.axure.com/forum/support-axure-com-collection/4257-answered-how-add-external-object-into-axure-using-inline-frame-adding-paypal-button-youtube-video-flash-html-any-embed-code-iframe.html

[habermaor]

Hi Paul,

Is there also a way to add a button for Play/Pause to movie?

I’m interested in adding such a button, and not using the original controllers of the media player, so I can use the button’s onClick event to trigger some more actions.

thanks!

[joshi]

Hi Paul,

It shows only the player but the video is not playing.

Thanks!

[Paul_Axure]

It’s likely that your video is not located in the correct place. This video should be in the generated html folder for that specific page. It has nothing to do with where the RP file is located (side note).

[joshi]

Hi Paul,

Thank you So much.

[Salsa]

Or, alternatively, and a lot more easily…

Just use this:

<video autoplay loop>
       <source src="localvideoname.ext">
</video>

[JulieC]

I have tried creating the .txt file with the code that Salsa suggests, and saving it as an .html file (“ScenarioA1.html”). I’ve put both that file and the .mov file (ScenarioA1.mov) in the top level of the generated prototype folder, at the same level as the start.html file.

The external link in my prototype is set up to open ScenarioA1.html in a pop-up. When the page opens, I’m simply seeing the code content of the .html file. It’s not playing the video.

I’m using Axure RP 7.0

Thanks for any tips.

[Paul_Axure]

I would recommend getting the .html page to work on its own, using html and the research thereof. Axure is just opening the window so if your HTML page isn’t working then it won’t work when used in the context of Axure.

[wanda]

Is there any reason this would not be applicable to 7.0?

[Paul_Axure]

Should work! I would recommend the <video> tag instead of the code from my initial post.

[LogCastle]

Should work! I would recommend the <video> tag instead of the code from my initial post.

I can get this to work using the <video autoplay loop>; however there is a border around the video. I have selected to never show scrollbars and checked hide borders, but there is a ~150 pixel wide border at the top and a 30 pixel border on the left.

If I decrease the size of the inline frame the video is cut off on the right and bottom while these odd borders still appear at the top and left.

I am using 7.0.3159

Any ideas how to get my video to exactly match the size of the inline frame and run it right up to the edges of it? Thanks!

Here is my html file:
<video width=“320” height=“240” autoplay loop>
<source src=“File1.MP4” type=“video/mp4”>
</video>

[JRico]

Hi Paul

I am trying to embed a mp4 local video. Using this format I cannot reproduce it. It’s weird, because I did a test with another mp4 video (315 kb) and was ok, but with another of (9Mb) it doesn’t work. Do you know what could be the problem?

Thanks in advance

[light_forger]

Hey JRico,

I wonder if it has to do with buffering and caching. You can try optimizing the video (memory size and resolution size) using HandBrake: https://handbrake.fr/

light_forger

[Kannan]

Hi Paul,

Am getting “File Not Found” error.

Elemets Prototype folder:
demo.rp
videonamefile.txt
videonamefile.html
video.wmw

[Alex_Axure]

Hi Kannan,

Would you be able to attach your .rp file and the videonamefile.txt file as attachments to this thread? That should be a good start to see what might be causing the error. Thanks!

Alex

[aserd]

Can someone post the updated version on how to do this with Axure 8?

Paul’s post goes back to 2012 so I am just curious on if there is a different way to do it now.

[Alex_Axure]

Can someone post the updated version on how to do this with Axure 8?

Paul’s post goes back to 2012 so I am just curious on if there is a different way to do it now.

Hi there,

Since the original post, I believe the main new feature that’s related would be the addition of Axure Share Plugins. Plugins give you another avenue to incorporate the external code. By and large, however, there hasn’t been much change with respect to adding video content to prototypes. As Paul mentions, uploading videos to YouTube (or other services) and linking to them from within the prototype is often a simpler workflow. But I’ll be updating my product manager so as to evaluate ways to make importing video easier. The following thread includes a couple examples that can help as well:

https://www.axure.com/c/forum/7-0-tips-tricks-examples/10026-100%-wide-background-videos.html

Paul included a demo for adding video in an Axure Share prototype via a plugin. And another user provides a nice walkthrough for playing a local video stored in the generated HTML folder, in this post:

https://www.axure.com/c/forum/7-0-tips-tricks-examples/10026-100%-wide-background-videos.html#post42686

Feel free to follow up if you run into problems along the way, though–we’d be happy to help take a look.

[wentzel]

Thanks Alex for taking this feature with your product manager! It would be really good to be able to add videos in a simple way. Both through youtube and local file. It’s not always suitable to publish the video on youtube…

[Tintin]

Hi,

I did as what you posted here but it didn’t work for Safari or Chrome. See the screenshots attached.

The AxShare server is not available in my area. And it’s not suitable to upload my video to a public video stream. So… I guess I have to use the local file method. I think it might be the code itself… Does Windows Media Player still work in Chrome or Safari?

Thanks

[Alex_Axure]

Hmm, since the OP, it does appear that the former method of using the <object> element to embed video has largely been replaced in current browsers. Today the standard format for playing video is HTML5 video using MP4s. Would it be possible to convert your video to MP4 and use the <video> element? Something like this:

<video autoplay>
  <source src="YourVideo.mp4" type="video/mp4">
</video>

And here’s more info about this:

https://www.w3schools.com/tags/tag_video.asp

HTML5 video

Self-hosting the video may also be a feasible alternative to using a public video service like YouTube.