HTML5 is the latest version of the HTML language – the foundation of the Web. It’s designed to make websites and apps run smooth and clean on just about every platform out there: Windows, Mac, Linux, iOS, Android, etc.
One particular value to HTML5 is video rendering. In the past, video sites like YouTube used an extra piece of software called Flash to run their videos. (YouTube has recently added an HTML5 version of its player.)
What’s this have to do with Sitefinity? Well, the team at Telerik built something into the latest Sitefinity CMS: a dedicated HTML5 video player.
The Sitefinity 7.0 Video Player Basics
Officially, it’s called the “Telerik RadMedia Player”. You place it on a webpage by dragging & dropping the “Video” widget.
Sitefinity has had this widget for a while. It’s only in Version 7.x that we’ve had the HTML5 version of the video player.
It supports playing the following video formats:
The .AVI and .MOV formats are not supported. Try to upload them and you’ll receive an error. If you do have AVI or MOV videos you want to use in your Sitefinity website, you can do one of two things. Convert the video file into .MP4 format using a software tool or web app, or upload the file to YouTube.
We’ve talked about embedding videos from YouTube on a webpage before. But this new video player gives us a better way.
An Alternative to YouTube Embedding
The new video player gives two major advantages over past versions:
1. Since it’s in HTML5, the load time is faster, and its display is cleaner.
2. The new player can play videos hosted within Sitefinity–and play videos directly off of YouTube!
Now we’re talking. This a big advantage over YouTube embedding – it means you have much finer control over how the video displays on your site.
The YouTube embedding code is helpful – lets you put videos just about anywhere. But it tends to break certain page layouts, especially on mobile devices. Then it just looks ugly.
HTML5 is specifically designed to avoid that. Using Sitefinity’s player, you control how big a video is, and how well it blends into a page.
So how do we use this fancy new HTML5 video player? If you’re running Sitefinity CMS 7.0 or higher, this is how.
Part 1: Upload a Video in Sitefinity, or to YouTube
Just as straightforward as it sounds. Either upload a video to your YouTube channel, or navigate to the “Videos” library under Sitefinity’s Content menu. Both locations make it easy to upload your video files. (Remember the format limitations listed above.)
Refer to these posts if you need any help:
Part 2: Insert the Video Widget
To post the video you’ve uploaded to a webpage:
- Open the webpage in Sitefinity for editing.
- Drag the “Video” control to the location you want it on the page.
- Click “Edit” to open the widget for editing.
- For videos uploaded into Sitefinity:
- Click “Select Video”. Click the icon of the video you’ve just uploaded in the next window.
- Click Done. You’ll see the video load in the original window.
- Click Save.
- For videos uploaded to YouTube:
- In the lower-right corner, click the “Advanced” button.
- If you want to play a single YouTube video, in YouTubeVideoURL, enter the URL of the video.
- If you want to play a YouTube playlist (yes, you can even load entire YouTube playlists!), in YouTubePlaylistID, enter the YouTube playlist ID.
- Click Save.
- At the top of the page editor window, click Preview to test your video. (Videos will not load within the page editor – this is disabled, since it slows down the page.)
Part 3: Configure the Video Player Options
- Click “Edit” on the Video widget. Click the “Advanced” button again. The other fields you see? They control things…many things! Options like:
- AutoPlay: If you want the video to play automatically when the page is loaded, change the value to “True”.
- FullScreen: Loads the video in full-screen if set to “True”.
- Height: Changes the video player’s default height.
- Width: Changes the video player’s default width.
- StartTime: Changes the start time at which the player starts playing. Value is in seconds, so you’d enter “10” to start at 10 seconds in.
- StartVolume: Is your video too loud/too quiet? Change this number to change its starting volume (measured in percent, from 1 to 100).
- EnableSocialShare: Displays social sharing buttons, to let visitors share your video on Facebook, Twitter, etc. True/False value. (If you want to configure which buttons show up, use this resource: Social Sharing.)
- And more.
- Click Save.
- At the top of the page editor window, click Preview to test your video.
A demo video and features list for the HTML5 video player are located here:
Telerik RadMedia Player – Demo
All that capability, built into one widget in the Sitefinity CMS. Makes adding videos to pages both fast and flexible.
And since it uses HTML5, your videos show up the same on an iPhone as they would on your laptop.
What are your thoughts? Would you host videos directly on your site, if your site had a video player with all the power of YouTube – and more?