6 Replies Latest reply: Apr 13, 2010 7:10 AM by karma_koan RSS

    SpryTabbedPanel: Flash player in tabs do not play video streams

    karma_koan

      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.116.232.4/live/livestr eam&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/lives tream&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();