Skip navigation
Currently Being Moderated

SpryTabbedPanel: Flash player in tabs do not play video streams

Apr 12, 2010 8:42 AM

Note: I am a complete noob (no experience with Javascript and rudimentary experience with htlm/css). Please be patient (I hope that this is the correct forum for this) and know that I am appreciative of any help or solution that anyone can provide.

 

Using Dreamweaver CS4 on Mac OS 10.5.8

 

We recently switched all of our streaming servers from Windows Media (good riddance) to Flash Media Server 3.5 (now getting awesome H.264 quality in comparison).

 

I was asked to re-design this webpage with the aim of re-organizing the content so that it is more accessible:

http://www.librarymedia.net/VideoGallery.html

 

We used Adobe's test page for our first page:

http://www.librarymedia.net/flash/videoplayer.html?source=rtmp://63.11 6.232.4/live/livestream&type=live&idx=10

 

This was meant as a temporary page to get us started, and as you can see, it needs work but at least it works.

 

I've been working the the final version of this page. My boss wants a tabbed web page with links to our video streams (tab for each category of streams).

 

This is what I have so far:

http://www.librarymedia.net/Flash2/videoplayer2.html?source=rtmp://63. 116.232.4/live/livestream&type=live&idx=10

 

I realize that I had several options before building this. One, I could have made a separate page for each tab and linked them with a tab menu. In hindsight, this might have been a better option since I could have just copied the working page that we already have for each tab. Or I could have done what I have tried to do: to use Dreamweaver's SpryTabbedPanel to make the tabs and insert a Flash player with links into each tab.

 

The problem:

1. The streams do not play. The player says "initializing" and then "please enter a stream name and play". Please note that I used SpryURLutils to get each link to open in the appropriate tab.

 

2. After reading about the benefits of external vs. inline javascript, I took all of the inline javascript that was contained in Adobe's sample page and placed it in an external file. I tried placing the javascript back into the source code (inline), but this did not fix the problem. I guess there is a Javascript problem or I need extra Javascript code to get this to work.  The javascript code is below. Use view source in your web browser to see source code. Please let me know if I need to provide more information.

 

Thanks.

 

// (C) Copyright 2008 Adobe Systems Incorporated. All Rights Reserved.
// NOTICE:  Adobe permits you to use, modify, and distribute this file in accordance with the terms of the Adobe license agreement accompanying it. 
// If you have received this file from a source other than Adobe, then your use, modification, or distribution of it requires the prior
// written permission of Adobe.
// THIS CODE AND INFORMATION IS PROVIDED "AS-IS" WITHOUT WARRANTY OF
// ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
// THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
// PARTICULAR PURPOSE.
// THIS CODE IS NOT SUPPORTED BY Adobe Systems Incorporated.


// Version check based upon the values defined in globals
                                            var hasRequestedVersion = DetectFlashVer(10, 0, 0);

 

                                            if(!hasRequestedVersion)
                                            {
                                                var div = document.getElementById("flashcontent");
                                                div.innerHTML = '<a href="http://www.adobe.com/go/getflashplayer/" style="color:black"><img src="images/ERROR_getFlashPlayer.gif" width="641" height="377" /></a>';
                               
                                            }
                                            else{
                                                    AC_FL_RunContent(
                                                        "src", "swfs/videoPlayer",
                                                        "width", "640",
                                                        "height", "377",
                                                        "id", "videoPlayer",
                                                        "quality", "high",
                                                        "bgcolor", "#000000",
                                                        "name", "videoPlayer",
                                                        "allowfullscreen","true",
                                                        "type", "application/x-shockwave-flash",
                                                        "pluginspage", "http://www.adobe.com/go/getflashplayer",
                                                        "flashvars", flashVars
                                                    );
                                               
                                            }
                                      // -->  

 

// Javascript in original page

 

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

 

function changeImages() {
    if (document.images && (preloadFlag == true)) {
        for (var i=0; i<changeImages.arguments.length; i+=2) {
            document [changeImages.arguments[i]].src = changeImages.arguments[i+1];
        }
    }
}

 

var preloadFlag = false;
function preloadImages() {
    if (document.images) {
        navi_01_over = newImage("images/button_dynamic_up.gif");
        navi_02_over = newImage("images/button_samples_up.gif");
        navi_03_over = newImage("images/button_interactive.gif");
        preloadFlag = true;
    }
}

 

function changetab(obj, obj2, obj3, left1, left2, left3, nav1, nav2, nav3){
    document.getElementById(obj).style.display = 'block';
    document.getElementById(obj2).style.display = 'none';
    document.getElementById(obj3).style.display = 'none';
   
    document.getElementById(left1).style.display = 'block';
    document.getElementById(left2).style.display = 'none';
    document.getElementById(left3).style.display = 'none';
   
    document.getElementById(nav1).src = "images/" + nav1 + "_up.gif";
    document.getElementById(nav2).src = "images/" + nav2 + "_down.gif";
    document.getElementById(nav3).src = "images/" + nav3 + "_down.gif";
}

 

function tabout(obj, nav){
    if (document.getElementById(obj).style.display == 'block'){
        document.getElementById(nav).src = "images/" + nav + "_up.gif";
    }
    else{
        document.getElementById(nav).src = "images/" + nav + "_down.gif";
    }
}

 

function tabover(obj){
    document.getElementById(obj).src = "images/" + obj + "_up.gif";
}

 

// Functionality

 

    <script language="javascript">

 

        var queryParameters = new Array();
        var flashVars = "";
        var tag = "";
        var url = "";
       
        window.onload = function ()
        {

 

            for(var i=1 ; i<=10;i++)
            {
                var ids = String("sel"+i.toString());

 

                document.getElementById( ids ).style.visibility = "hidden";
                document.getElementById( ids ).className = "style76";
            }

 

            // mark the entry for that index
            if(queryParameters['idx'] != "")
            {
                document.getElementById("td" + queryParameters['idx'] ).className = "style75";
                document.getElementById("sel" + queryParameters['idx'] ).style.visibility = "visible";
               
            }

 

        }

 

        function initialise()
        {

 

            function getUrlParam( name )
            {
                  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
                  var regexS = "[\\?&]"+name+"=([^&#]*)";
                  var regex = new RegExp( regexS );
                  var results = regex.exec( window.location.href );
                  if( results == null )
                        return "";
                  else
                        return unescape( results[1] );
            }

 

 

 

            queryParameters['source'] = getUrlParam('source');
            queryParameters['type'] = getUrlParam('type');
            queryParameters['idx'] = getUrlParam('idx');

 

 

 


               flashVars += "&videoWidth=";
            flashVars += 0;

 

            flashVars += "&videoHeight=";
            flashVars += 0;

 

            flashVars += "&dsControl=";
            flashVars += unescape("manual");

 

            flashVars += "&dsSensitivity=";
            flashVars += 100;

 

            flashVars += "&serverURL=";
            flashVars += queryParameters['source'];

 

            flashVars += "&DS_Status=";
            flashVars += "true";

 

            flashVars += "&streamType=";
            flashVars += queryParameters['type'];

 

            flashVars += "&autoStart=";
            flashVars += unescape("true");

 

            tag = "&lt;object width='640' height='377' id='videoPlayer' name='videoPlayer' type='application/x-shockwave-flash' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' &gt;&lt;param name='movie' value='swfs/videoPlayer.swf' /&gt; &lt;param name='quality' value='high' /&gt; &lt;param name='bgcolor' value='#000000' /&gt; &lt;param name='allowfullscreen' value='true' /&gt; &lt;param name='flashvars' value= '"+                   
            flashVars+"'/&gt;&lt;embed src='swfs/videoPlayer.swf' width='640' height='377' id='videoPlayer' quality='high' bgcolor='#000000' name='videoPlayer' allowfullscreen='true' pluginspage='http://www.adobe.com/go/getflashplayer'   flashvars='"+ flashVars +"' type='application/x-shockwave-flash'&gt; &lt;/embed&gt;&lt;/object&gt;";
                           
           
        }

 

        function playStream()
        {
            var url = "source=" + document.getElementById('inputURL').value;
            var type;

 

            if(document.getElementById('vodCheckbox').checked==true)
                type="vod";
            else
                type="live";

 

            url += ("&type=" + type);

 

            document.getElementById('playBtn').href="videoplayer.html?" + url;

 

        }

 

        function checkbox(type)
        {
            if(type=="vod")
            {
                if(document.getElementById('liveCheckbox').checked==true)
                {
                    document.getElementById('liveCheckbox').checked=false;
                }
            }
            if(type=="live")
            {
                if(document.getElementById('vodCheckbox').checked==true)
                {
                    document.getElementById('vodCheckbox').checked=false;
                }
            }
        }

 

        initialise();

 
Replies
  • Currently Being Moderated
    Apr 12, 2010 9:28 AM   in reply to karma_koan

    Hi

     

    Although tabbed panels are not strictly Ajax for most applications they are considered to be so. This means that you will require the Flash-Ajax-Video component in order to get the videos to 'work' when placed inside tabbed panels.

    To get the component and read the documentation go to - http://opensource.adobe.com/wiki/display/favideo/Flash-Ajax+Video+Comp onent.

     

    PZ

    www.pziecina.com

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2010 9:50 AM   in reply to karma_koan

    Hi

     

    You can still use the 'standard' player the code just customizes it to work in 'ajax'.

    The correct link is - http://opensource.adobe.com/wiki/display/favideo/Flash-Ajax+Video+Comp onent, sorry about that.

     

    PZ

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 12, 2010 10:27 AM   in reply to karma_koan

    Hi

     

    There is a sample application of the code included with the zip file which shows how to implement it.

     

    PZ

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points