HTML5 Video as ASP.Net usercontrol

HTML5 Video was supposed to fix everything. It almost did.

We use FlowPalyerHTML to handle the fallbacks (IE does not support HTML video yet). We followed the instructions here: http://flowplayer.org/

The code needed in ASCX

<div data-swf="/NorthBankEnterpriseAssets/Content/swf/flowplayer.swf" data-ratio="0.417" runat="server" id="divFlowPlayer">
    <video runat="server" id="vidItem" controls="controls">
        <source type="video/mp4" runat="server" id="videoMP4" Visible="false" />
        <source type="video/webm" runat="server" id="videoWEBM" Visible="false" />
        <source type="video/ogg" runat="server" id="videoOGV" Visible="false" />
    </video>
</div

The .CS code is:

        public string VideoWebm { get; set; }
        public string VideoMp4 { get; set; }
        public string VideoOgg { get; set; }
        public string PictureOverlay { get; set; }
        public string VideoWidth { get; set; }
        public string VideoHeight { get; set; }

        protected void Page_Load(object sender, EventArgs e)
        {
            int temp;
            if (string.IsNullOrEmpty(this.VideoWidth) || !int.TryParse(this.VideoWidth, out temp))
            {
                this.VideoWidth = "320"; // default setting
            }
            if (string.IsNullOrEmpty(this.VideoHeight) || !int.TryParse(this.VideoHeight, out temp))
            {
                this.VideoHeight = "200"; // default setting
            }

            vidItem.Attributes["width"] = this.VideoWidth;
            vidItem.Attributes["height"] = this.VideoHeight;

            vidItem.Style.Add("width", this.VideoWidth + "px");
            vidItem.Style.Add("height", this.VideoHeight + "px");

    //        divFlowPlayer.Style.Add("width", this.VideoWidth + "px");
    //        divFlowPlayer.Style.Add("height", this.VideoHeight + "px");

            // WebM
            if (!string.IsNullOrEmpty(this.VideoWebm))
            {
                videoWEBM.Attributes.Add("src", this.VideoWebm);
                videoWEBM.Visible = true;
            }

            // MP4
            if (!string.IsNullOrEmpty(this.VideoMp4))
            {
                videoMP4.Attributes.Add("src", this.VideoMp4);
                videoMP4.Visible = true;
            }

            // MP4
            if (!string.IsNullOrEmpty(this.VideoOgg))
            {
                videoOGV.Attributes.Add("src", this.VideoOgg);
                videoOGV.Visible = true;
            }

            // MP4
            if (!string.IsNullOrEmpty(this.PictureOverlay))
            {
                vidItem.Attributes.Add("poster", this.PictureOverlay);
            }
        }

Each page needs to reference the flowplayer-skin css (ie minimalist.css_ and the flowplayer.js as downloaded from their site.

The important issues we had:

1. Always have the MP4 source file first – because IOS5 only supports HTML5 video if the MP4 is first.

2. Add separate code to only use the Flowplayer JS if HTML5 video is not supported. Done like this:

 var canPlay = false;
    var v = document.createElement('video');
    if (v.canPlayType) {
        canPlay = true;
    }

    if (canPlay == false) {
        setTimeout(function () {
            $(".flowplayervideo").flowplayer({ engine: "html5", autoPlay: false, swf: "/NorthBankEnterpriseAssets/Content/swf/flowplayer.swf" });
            $(".flowplayervideo1").flowplayer();
        }, 100);
    }

 

 

Alternatively use Video 4 Everyone: This does not work on all browsers though (does any solution?): http://camendesign.com/code/video_for_everybody

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>