asked on

AJAX EXTENDER COLLAPSIBLE PANEL AND LINKING/EMBEDDING MP4 VIDEO FLASHING

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

mlaise

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 Bash

ASKER

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

mlaise

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 Bash

ASKER

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

ASKER CERTIFIED SOLUTION

mlaise

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial