Over the last week I’ve been customizing an internal version of IdeaStrike for deployment to capture innovations for a project team. Prior to deploying out the application it was decided the application required some decent promotional content in the form of an eye catching email and an IdeaStrike 101 video tutorial. The team really wanted to make IdeaStrike 101 video easily discoverable and accessible through the application. Why not create a new page and display the video using HTML 5 video element? This would provide the functionality, an excuse to use the new HTML 5 elements and provide the opportunity to get our hands dirty with HTML 5.
HTML 5 video element provides native support for embedding video content in HTML. However, not all browsers support all the HTML elements to their full spec yet. After playing with the HTML 5 element a bit I quickly realized a good amount of customization was required to obtain the desired look and feel. Then I found VIDEO JS HTML 5 Video Player. What a gem!
How simple is Video.js? I was watching video on my page in less than 5 minutes. No joke!
Update March 7, 2012 If you are hosting on II6 or II7 follow Microsoft instructions to setup the proper MIME Types.
File name extension / MIME type:
- .webm – “video/webm”
- .ogg – “application/ogg”
- .ogv – “video/ogg”
- .mp4 – “video/mp4″
- .m4v – “video/m4v”
What is VIDEO JS HTML 5 Video Player?
I recommend taking a look at Video.js Getting Started. This will literally have you displaying a sweet looking playable video in less than five minutes! If you’d like to follow along with the changes to IdeaStrike proceed. Please note I have not included all the code, just the section I believe are helpful to understand what needs to happened to implement into IdeaStrike. You can take a look at the source here
Team wants a new Support page to provide an email address for the admin group and a video training library using HTML 5 video element, specifically HTML5 Video JS Player. Red light Green light GO!
To get a basic shell created perform the following steps:
- Add Support link to header menu
- Create a new SupportModule
- Create a new Support View
- Add a HeadContent section to the Support Index View with the Video.js CSS and JS
- Add the video tag with basic properties
- Update the poster attribute with path to video background.
- Add source with dummy video file
- Run to see the video container
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Now convert video file from .AVI to .OGV.
- Download Micro Video Converter and install.
- Drag the .AVI file to Micro Video Converter.
Theoravideo output format.
Back to IdeaStrike project.
- Create a Video folder in
- Copy the new .OGV file to
- Update the
sourceelement setting the path to the new video file.
- Set the data-setup properties
- Save All
- Navigate to Support View
- Click on the video.
1 2 3 4
Get a look at the first cut!
- Support link
- HTML 5 Video JS Player