• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 978
  • Last Modified:

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

0
Howard Bash
Asked:
Howard Bash
  • 3
  • 2
1 Solution
 
mlaiseCommented:
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
0
 
Howard BashSenior Software EngineerAuthor 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
0
 
mlaiseCommented:
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
0
 
Howard BashSenior Software EngineerAuthor 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
0
 
mlaiseCommented:
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.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now