We help IT Professionals succeed at work.

AJAX EXTENDER COLLAPSIBLE PANEL AND LINKING/EMBEDDING MP4 VIDEO FLASHING

Medium Priority
993 Views
Last Modified: 2013-11-07
I have added an AJAX Extender Collapsible panel with several linked/embedded objects to show on demand some neat MP4 videos.  It all works, but there is a lot of lag loading the MP4 files and flashing of the loading on page load and reloads which looks bad and slows the process down (too much I think).

I will include the aspx code below and thanks.

<%@ Page Language="VB" MasterPageFile="~/SiteMaster.master" AutoEventWireup="false" CodeFile="sandbox.aspx.vb" Inherits="sandbox" title="Untitled Page" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 
        <asp:Panel ID="pnlCollapsibleHeaderContent" runat="server" CssClass="collapsePanelHeader" Height="30px"> 
            <div style="padding:5px; cursor: pointer; vertical-align: middle;">
                <div style="float: left;">Some Cool Computer Graphics (Eye Candy)</div>
                <div style="float: left; margin-left: 20px;">
                    <asp:Label ID="lblCollapsiblePanelPrompt" runat="server">(Let's Check Them Out...)</asp:Label>
                </div>
                <div style="float: left; vertical-align: middle;">
                    <asp:ImageButton ID="imgExpandContract" runat="server" ImageUrl="~/images/expand.jpg" AlternateText="Show the content"/>
                </div>
            </div>
        </asp:Panel>
        
        <asp:Panel ID="pnlCollapsibleContent" runat="server" CssClass="collapsePanel" Height="0" Width="600px">
            <p>
 
                <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="400" HEIGHT="300" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
                    <PARAM name="SRC" VALUE="media/Antarcti2001_256kb.mp4">
                    <PARAM name="AUTOPLAY" VALUE="false">
                    <PARAM name="CONTROLLER" VALUE="true">
                    <EMBED SRC="media/Airheads2001_256kb.mp4" WIDTH="400" HEIGHT="300" AUTOPLAY="false" CONTROLLER="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
                    </EMBED>
                </OBJECT>
 
                <div id="div4" style="font-family:Comic Sans MS; font-style:italic; font-size:8pts">
                Antarctica Fly Over
                </div>
 
            </p>
            <p>
 
                <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="400" HEIGHT="300" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
                    <PARAM name="SRC" VALUE="media/Antarcti2001_256kb.mp4">
                    <PARAM name="AUTOPLAY" VALUE="false">
                    <PARAM name="CONTROLLER" VALUE="true">
                    <EMBED SRC="media/Airheads2001_256kb.mp4" WIDTH="400" HEIGHT="300" AUTOPLAY="false" CONTROLLER="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
                    </EMBED>
                </OBJECT>
 
                <div id="div1" style="font-family:Comic Sans MS; font-style:italic; font-size:8pts">
                Antarctica Fly Over
                </div>
 
            </p>
            <p>
 
                <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="400" HEIGHT="300" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
                    <PARAM name="SRC" VALUE="media/Antarcti2001_256kb.mp4">
                    <PARAM name="AUTOPLAY" VALUE="false">
                    <PARAM name="CONTROLLER" VALUE="true">
                    <EMBED SRC="media/Airheads2001_256kb.mp4" WIDTH="400" HEIGHT="300" AUTOPLAY="false" CONTROLLER="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
                    </EMBED>
                </OBJECT>
 
                <div id="div2" style="font-family:Comic Sans MS; font-style:italic; font-size:8pts">
                Antarctica Fly Over
                </div>
 
            </p>
            <p>
 
                <OBJECT CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" WIDTH="400" HEIGHT="300" CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">
                    <PARAM name="SRC" VALUE="media/Antarcti2001_256kb.mp4">
                    <PARAM name="AUTOPLAY" VALUE="false">
                    <PARAM name="CONTROLLER" VALUE="true">
                    <EMBED SRC="media/Airheads2001_256kb.mp4" WIDTH="400" HEIGHT="300" AUTOPLAY="false" CONTROLLER="true" PLUGINSPAGE="http://www.apple.com/quicktime/download/">
                    </EMBED>
                </OBJECT>
 
                <div id="div3" style="font-family:Comic Sans MS; font-style:italic; font-size:8pts">
                Antarctica Fly Over
                </div>
 
            </p>
            
        </asp:Panel>
 
<ajaxToolkit:CollapsiblePanelExtender ID="cpeMediaFun" runat="server"
    TargetControlID="pnlCollapsibleContent"
    ExpandControlID="pnlCollapsibleHeaderContent"
    CollapseControlID="pnlCollapsibleHeaderContent"
    CollapsedSize="0"
    ExpandedSize="300"
    Collapsed="True"
    AutoCollapse="False"
    AutoExpand="False"
    ScrollContents="True"
    TextLabelID="lblCollapsiblePanelPrompt"
    CollapsedText="Show Details..."
    ExpandedText="Hide Details..." 
    ImageControlID="imgExpandContract"
    ExpandedImage="~/images/collapse.jpg"
    CollapsedImage="~/images/expand.jpg"
    ExpandDirection="Vertical"             
/>
 
</asp:Content>
 
''''''
/*CollapsiblePanel*/
.collapsePanel 
{
	
	background-color:palegoldenrod;
	overflow:hidden;
}
 
.collapsePanelHeader{
	width:100%;
	height:30px;
 
	background-image: url(~/images/bg-menu-main.png);  <---btw, i don't see this image on the page?
 
	background-repeat:repeat-x;
	color:blue;
	font-weight:bold;
	font-family:Comic Sans MS;
	font-style:italic;
	font-size:medium;
}

Open in new window

Comment
Watch Question

Commented:
One way I would consider addressing the issue would be by changing the loading to be On Demand.  With ASP.Net and AJax you can quickl;y and easily inject HTML code into the form when the user expands one of the panels.  That way the user is only loading what they are looking at and you save a little bandwidth and load time.

Example to adding events to the control: http://forums.asp.net/p/1112899/1717195.aspx
Howard BashSenior Software Engineer

Author

Commented:
The URL above has some interesting javascript which will allow me to "do something" during the expand and/or the collapse events based on this.  Now all I need to discover is how to control the loading of media on demand (expand event).  I suspect I need the control's ID,  plus some parameter setting on the quicktime object(s).

I am going to google around on this and will leave my finding here as well as your points for the URL.

Thanks,
Howard

Commented:
You can use the Literal Control that comes with ASP.Net to inject HTML code into your page from code.  Here is a simple example of how it would be done, not on the scale you are looking to do it but none the less it should offer some guidance.

http://www.startvbdotnet.com/aspsite/controls/label.aspx
Howard BashSenior Software Engineer

Author

Commented:
Hi,

I just checked the url above and the literal control that it demonstrates.  It appears to show how you can provide a bit of html for the control's text property and it will evaluate the html and render the text as the html requests.

It's not clear to me how this control would be used for loading and playing mp4 files on demand...

Thanks,
Howard
Commented:
When you expand the panel you can inject the HTML code into the control to display the videos.  It will load the vids without having the bad load time when the user first comes to the site.  You can also break the videos apart into many panels and only load one or two based on the users selection.

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.