Add HTML5 Video to Site Spinner

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 Site Spinner a website building software from virtual mechanics. You can follow the tips bellow to add HTML5 videos to Site Spinner 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 I get the video and want to post it on my Site Spinner 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 WordPress video player. This video player for Site Spinner can output HTML5 videos at the same time. Sounds good? That’s not all. How about a Site Spinner video gallery? Can I get any video player for my Site Spinner 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 Site Spinner does the rest.

Upload HTML5 Videos to Site Spinner Directory

Site Spinner saves the generated HTML files and other website pages and files on your computer hard disk. Go to copy over the generated HTML 5 video files from the output folder of the HTML 5 Video Player to the website directory of Site Spinner.

Add HTML 5 Videos to Site Spinner

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 />. With HTML5 Video Player, all the embed code will be generated automatically, you can follow bellow steps to embed html5 video gallery into Site Spinner.

Embedding HTML5 video Gallery into Site Spinner

Now you get the Site Spinner video player online and you get the default video player. The default HTML 5 video player is not bad, but it is identical around the web. How about the customizable Site Spinner video gallery for professionally display of my online videos? We have mentioned it above and we have saved it in the output folder of the HTML 5 Video Player, also we copy it over to the Site Spinner website directory. How to embed the personalized Site Spinner video gallery?

Step 1. Get the HTML 5 video Embed Code snippet

The HTML 5 Video Player will generate a HTML file, named html5video.html, in the output folder, you can get two embed code snippets from the HTML source.

Please note from the output folder of HTML5 Video Player, there will be a html5video.html file under each project. You can use a text editor, or use a page editor such as Dreamweaver, Frontpage to open this html file and switch to code view, you can then find the embed code snippets. See more from this guide: How to embed HTML5 video to your webpage?

Run Site Spinner, open the page you like to add the videos to, click the Enter Code Text button from the left tools panel of Site Spinner. Then you can copy the HTML 5 video embed code from the generated html5video.html file.

Step 2. Paste the HTML 5 video Embed Code into Site Spinner

From Site Spinner, add the embed code into the page body through the Enter Code Text tool from the left panel of the website builder. See the first image above.

Click the Edit Page Properties button from the left tools panel of Site Spinner, and paste the other embed code snippet into the header of your web page. See screenshots as bellow:

After that, save you page and go to generate your Site Spinner site again. You are done!

Now you know how to add HTML5 Video to Site Spinner that works almost everywhere, the html 5 video for mobile web browser, the HTML 5 video for the tablet browser….

Need more help in adding the HTML 5 video player, check out this guide: To embed HTML5 video gallery into your website.