123 Online > App Details > Shift CMS Info Sites > HTML5 Video Player

HTML5 Video Player - $400

video.pngEasily add videos to your website, without having to go through third parties like YouTube or Vimeo.

Don't want Youtube or Vimeo branding on your website's videos? No problem. With this app, you can use the latest HTML5 technology to play your videos in a player installed on your website, rather than a third party. You can have as many videos and as many places as you'd like with this app. Best of all, your videos look great – you'll even be able to define a preview image for your video to display before your video is played.

Our latest development - we've now programmed in the functionality to have the option of auto-playing video, and auto-playing video the first time the visitor has been to the page (based on cookies). Research shows having your sales videos automatically play greatly improves conversion rates. Auto-playing video is great for landing pages from your google advertisements. Auto-playing video for the first visit only is great for your homepage.

Different browsers require different technology to play videos. HTML5 video works by playing your video in the relevant format – this means that when you're using this app, you'll have to convert your video into three different formats, but it will mean that your videos are much more likely to play in most people's web browsers. For web browsers that don't have HTML5, an alternative 'flash video' is used.

The setup for each video is a little involved, but by covering all your bases and converting your video into three different formats, you're getting a very powerful result that's cross-platform compatible. Your videos will look great on iPhones/iPads – when the visitor plays your video, it will open in fullscreen mode, without ever leaving your website. Contrast this to a youtube video for example – the visitor will leave your website and go to the youtube app on their iphone/ipad. With this video player app, when the visitor clicks 'done', they will return to your website's page.

You'll need to place your videos within your content areas, or if it's been arranged during your project consultation, in the designated video area of your website. If video integration is important to your project, and you'd like your video integrated into the header section, please let us know before your website goes to coding. It's your responsibility to point this out to us before we get your concept off to coding. We can integrate videos into the header section retro-actively after your site has been coded, but this will of course involve a cost as we'll need to redesign and recode a proportion of your header area. Most people however, want their videos in their content area. If this sounds like you too, you've got nothing to worry about.

Please keep in mind, the players are not editable. They will vary from computer to computer (as that's how HTML5 video works). For example, in iPhones, they will use the standard iphone video player. In firefox/chrome/explorer, they will appear as shown in the screenshots. The video players come complete with play/pause buttons, timeline, volume, and the fullscreen option.

Keep in mind that as with the realities of video, the fullscreen version of the video will be pixellated if the quality of the video is lower than the size of the visitor's screen. Likewise, the playback of the video is dependent on the download speed of the visitor, and their computer processing power to play videos. We cannot guarantee that your videos will play on all computers, but they should play on all computers with the latest versions of Explorer/Firefox or Chrome.

You'll be able to get your videos online by using our file manager within shift. If you want to upload larger videos than 8MBs, just email support and we'll set you up with FTP access so you can load files to the server directly from your FTP client.

Keep in mind, videos are an easy way to chew up disk space and bandwidth. At the time of this writing, you're initially setup with 1GB of disk space, and 4GBs of bandwidth. If your videos use this and you need more, you can upgrade your plan for $10+gst per month per GB.

Because of how HTML5 video works, you'll need to prepare four files. You'll need to provide a graphic (.jpg or .png) file of your 'poster/image preview', and your videos will have to be converted into three different formats. These formats are MPEG (.mp4), Theora/Ogg Video (.ogv), and WebM Video (.webm). You can easy convert your videos into this format by downloading some free video conversion software at http://www.mirovideoconverter.com. Also please keep in mind that as the video player is system generated, we're unable to change the look the player - the player is exactly as pictured below.

Please keep in mind, although we're here to help you on getting your videos up on to your website, we're unable to assist with installing or configuring Miro Video Converter, or any other video conversion software. If you'd like us to take over the video conversion and/or video loading process for you ($100+gst an hour), just provide us with your video files (and you're video preview files, if desired) and we'll take care of it all for you.

When you're loading in your videos, you'll be uploading your videos (in their various formats) and the image preview picture. You can also set 'maximum dimensions' for your video/image preview. For best results, you'll need to set these maximum dimensions to the exact dimensions of your video. If these dimensions are different, your image may pixellate, squash or elongate. If the dimensions set aren't exact, when the video is playing, there will be black bars above/below or to the left/right of the video.

HTML5 is the future of online video. As the technology gets better and the app is updated, your website will get the benefits of these updates automatically.