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”

If you are looking for an alternative to Video.js, look no further, MediaElement.js, a creation from the talented John Dyer.

What is VIDEO JS HTML 5 Video Player?

Video.js is a JavaScript and CSS library that makes it easier to work with and build on HTML5 video, now. This is also known as an “HTML5 Video Player”. Video.js provides a common controls skin built in HTML/CSS, fixes cross-browser inconsistencies, adds additional features like full-screen and subtitles, manages the fall-back to Flash or other playback technologies when HTML5 video isn’t supported, and also provides a consistent JavaScript API for interacting with the video.

Getting Started

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!

Changes:

To get a basic shell created perform the following steps:

1. Add Support link to header menu
2. Create a new SupportModule
3. Create a new Support View
4. Add a HeadContent section to the Support Index View with the Video.js CSS and JS
5. Add the video tag with basic properties
6. Update the poster attribute with path to video background.
7. Add source with dummy video file
8. 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

//
using System.Web.Configuration;
using Ideastrike.Nancy.Models;
//
using Nancy;

namespace Ideastrike.Nancy.Modules
{
    public class SupportModule: NancyModule
    {
        private readonly IUserRepository _users;
        private readonly ISettingsRepository _settings;

        public SupportModule(IUserRepository users, ISettingsRepository settings)
            : base("/support")
        {
            _users = users;
            _settings = settings;

            Get["/"] = _ =>
            {
                var m = Context.Model(settings.Title);
                m.Name = settings.Name;
                string emailsTo = WebConfigurationManager.AppSettings["adminLinkTo"].ToString();
                m.AdminLinkTo = string.Format("mailto:{0}?Subject=IdeaStrike%20Question", emailsTo);
                m.HomePage = settings.HomePage;
                m.WelcomeMessage = _settings.WelcomeMessage;
                return View["Support/Index", m];

            };
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@inherits Nancy.ViewEngines.Razor.NancyRazorViewBase
@{
    Layout = "Views/Shared/Layout.cshtml";
}

@section HeadContent
{
    <link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
    <script src="http://vjs.zencdn.net/c/video.js"></script>
}

<video id="my_video_1" class="video-js vjs-default-skin" width="640" height="264" poster="@Url.Content("~/Resources/ideastrike.jpg")"
        data-setup='{}'>
        <source src="my_video.mp4" type='video/mp4'>
</video>

Now convert video file from .AVI to .OGV.

1. Download Micro Video Converter and install.
2. Drag the .AVI file to Micro Video Converter.
3. Select Theora video output format.
4. Press Convert! button.

Back to IdeaStrike project.

1. Create a Video folder in ~\Resources folder
2. Copy the new .OGV file to ~\Resources\Video
3. Update the source element setting the path to the new video file.
4. Set the data-setup properties
5. Save All
6. Run
7. Navigate to Support View
8. Click on the video.

1
2
3
4

<video id="my_video_1" class="video-js vjs-default-skin" width="640" height="264" poster="@Url.Content("~/Resources/ideastrike.jpg")"
        data-setup='{"controls": true, "autoplay": false, "preload": "auto" }'">
        <source src="@Url.Content("~/Resources/Video/IdeaStrike.101.theora.ogv")" type='video/ogg'>
</video>

First Cut

Get a look at the first cut!

1. Support link
2. HTML 5 Video JS Player

References

• VIDEO JS HTML 5 Video Player
• VIDEO JS Getting Started
• jPlayer HTML5 Audio & Video for JQuery
• Micro Video Converter