Using HTML5 Video with Total CMS

Even though there is a video stack that comes with the Total CMS stack set, some people might not want to host their video on YouTube or Vimeo, and rather host their video on their own server. This is possible with Total CMS, but you need to use a stack that does not come with Total CMS, and that is a stack by Joe and is called HTML5 Video. This stack allows you to host your own video on your server and with the instrcutions here, you will find out how to let your clients change that video at any time.

First, you need to set up the content page with the HTML5 Video stack.

After that is done, set up your admin page so the client can alter the movie. To do this you will need to use the Total CMS File stack.

You will need to change two settings in the File stack. The first is the CMS ID. Change it to something you know will be unique. If you are going to have more than one video to change and want to use similar IDs, then just add a number. In this example, we will use videocms. You can change the placeholder text if you want, but that is not crucial. The other setting you NEED to change though is the File Type setting. Change that to mp4 (note - if you want to support older browsers as well, you will want to have to upload two files and make the second one an ogv file.)

Now it is time to get the URL from the file stack so you can put it in the HTML5 Video stack. Be sure you are in the admin page. Preview the page inside of RapidWeaver. Mouse over the area where you will drop your video file. When you do this, you will notice some icons appear in the upper section of the icon. There is a link and a trash icon.

Click on the link icon and you will get the URL to the video, even if you have not uploaded a video yet. This URL will never change, as long as you have the same stack on that page and never delete it.

You want to copy this URL and then go back to the HTML5 Video stack and find the place to put the URL for the MP4 file.

Now you can publish your page, this will allow you to drag and drop an MP4 file onto the page and upload the file. You can not drag and drop files on RapidWeaver preview. Once you have published your page, you can drag and drop videos if you preview from RapidWeaver in a browser like Safari.

Now go forth and make your websites great!