Add HTML5 Video to Moonfruit

In a related HTML5 Video tutorial, we talked about how to add HTML5 video to WordPress blogs and websites. In this guide, we will guide you through the steps to add HTML5 Video to Moonfruit websites and blogs. You can follow the tips bellow to add HTML5 videos to Moonfruit sites easily, so that your HTML5 videos can work almost everywhere, iPad, iPhone, Android, Chrome, IE and Firefox….

Converting HTML5 videos

What kind of videos are native HTML5 videos that can be added to HTML5 site with the new < video > tag and playable on HTML5 browsers? They are mp4, ogv and webm. Unfortunately there is not such a video format that is support by all HTML5 browsers. So you will have to get different HTML5 formats and versions for the same video. It is embarrassing, we know that. But HTML5 is still evolving. We can expect this to change in the future.

Ok, now we get the video and want to post it on the Moonfruit website/page. How to convert it to HTML5 video formats? Do I have to convert the same video to three different HTML5 video types three times?

Here we suggest HTML 5 Video Player. It can convert your videos into different HTML5 formats simultaneously. If you have multiple video clips, you can add them all to the Moonfruit video player software. This video player for Moonfruit can output HTML5 videos at the same time. Sounds good? That’s not all. How about a Moonfruit video gallery? Can I get any of these best video players for my Moonfruit website as well? That’s true. You will have the chance to choose html5 video gallery templates for your online video. The HTML 5 Video Player is so powerful and easy to use, you click the start, the video player for Moonfruit does the rest.

Upload HTML5 Videos to Moonfruit Directory

Can I upload the HTML5 videos to Moonfruit website directory? Based on our test recently, the answer is No.

Unlike other website builders or software, such as Dreamweaver or Site Spinner, that saves the generated web page documents and other website pages and files on your computer hard disk. See also:  Add HTML5 Video to Site Spinner

Moonfruit saves your website and all documents in the cloud on a remote server. Although Moonfruit provides you an online web browser uploader, they restrict the file types and formats.

What Kinds of Video Files Can I Upload to Moonfruit?

Here is what suggested by the Moonfruit official website:

You can upload any type of video file into your site. However, only the FLV file will play directly within your site. All other uploaded video files e.g. MPEG, WMV, AVI, will be stored in the ‘Download Files’ folder, where they can be linked to (e.g. using a Button Link) and then downloaded by your visitors.

Videos downloaded by your visitors will normally auto play on their computer system depending on what player they have installed e.g. Real Player, QuickTime, Windows Media Player.

That’s to say you can upload HTML5 video clips on to Moonfruit, but you will not able to get the HTML 5 videos into an online video player and make them playback right with your browsers. If you use the HTML 5 videos in your Moonfruit website or blogs, your site visitors will get a button link to your html 5 video file, when they click on it, they will download the video to their local computer other than play the video online.

Add HTML 5 Videos to Moonfruit – A Workaround

As we have talked about above, Moonfruit accepts FLV as the sole video format supported on all Moonfruit websites and blogs.

However there is still a workaround as we know that can help you add HTML 5 videos to your Moonfruit website or blog. Following are the tricks:

• 1. Upload HTML5 videos to a third party host
• 2. Add Reference to the HTML5 videos from Moonfruit

You can add the reference to HTML 5 video through a HTML snippet widget. Here is how to add the HTML snippet to Moonfruit page:

1. Click on Insert (toolbar) -> HTML Snippet (sidebar)
2. Position the widget (you can always move it later)
3. Click on the ‘Setup’ tab
4. If you have a snippet of code already, simply paste the HTML code into the blank field (or come back once you’ve copied it to your clipboard)
5. Click ‘Apply’
6. If dimensions are supplied within the code the widget will ask you if you want to resize using the given dimensions – click: ‘Yes’
7. ‘Save’ the page

Use the HTML 5 Video tag to add videos to Moonfruit

It has been a pain for many webmasters to place their video content through the old <embed> and <object> tags and a lot of parameters. Now HTML5 video and audio tags regarded them as images: <video src=””/>. You can also define other video display parameters such as width or height or automatic playback easily, for example, < video SRC = “width =” 640 “url px height =” 380 “px” autoplay />.

You can copy the HTML 5 video embed code from this article if you do not want to type manually (How to Embed HTML 5 Video into Websites Manually? ).

However there are a few things there you’ll need to manually edit. Obviously the URLs need to point to your video files and the video width/height.

Embedding HTML5 video Gallery into Moonfruit

Now you get the Moonfruit video player online and you get the default HTML5 video player style. The default HTML 5 video player is not bad, but it is identical around the web. How about the customizable HTML 5 Moonfruit video gallery for professionally display of my online videos? We have converted the HTML5 video at the very first beginning and we have saved it in the output folder of the HTML 5 Video Player. After that, I uploaded the HTML5 video files along with other video gallery files to the third party hosting. How to embed the personalized video gallery to Moonfruit?

Check out the details from this guide: To embed HTML5 video gallery into your website.