Home/ Questions/Q 6838295
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T23:34:46+00:00

I have a code that will allow FlowPlayer to retrieve a Javascript array and

  • 0

I have a code that will allow FlowPlayer to retrieve a Javascript array and run the video files when the user click it.

However, I have two problems:

  1. The player and the playlist was not display on the page.
  2. A error with regards to Flowplayer cannot access element.

(Just in case anyone ask, the full path of the video is http://mm.com/mmA/videoplayer/videos/591483.flv)

Below is the full code:

<%@ Page Language="C#" %>
<html dir="ltr">

<head runat="server">
<META name="WebPartPageExpansion" content="full">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled 1</title>
</head>

<body>

<form id="form1" runat="server">
</form>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>



<!--<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>-->
<script type="text/javascript" src="videoplayer/jquery.min.js"></script>
<script type="text/javascript" src="videoplayer/flowplayer-3.2.6.min.js"></script>
<script type="text/javascript" src="videoplayer/flowplayer.playlist-3.0.8.min.js"></script> 

<style>
/* player style */
/* container has a background image */

a.player {  
    display:block;
    width:500px;
    height:340px;
    text-align:center;
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    background:#000 url(/img/global/gradient/h500.png) repeat-x 0 0;
    background:-moz-linear-gradient(top, rgba(55, 102, 152, 0.9), rgba(6, 6, 6, 0.9));
    -moz-box-shadow:0 0 40px rgba(100, 118, 173, 0.5);
}

a.player:hover {
    background:-moz-linear-gradient(center top, rgba(73, 122, 173, 0.898), rgba(6, 6, 6, 0.898));   
}

/* splash image */
a.player img {
    margin-top:125px;
    border:0;   
}


#player {
    float:left;     
    height:325px;
    width:425px;
}   

/* playlist style */
#playlist {
    width:312px;
    height:350px;
    overflow-y:auto;
    overflow-x:hidden;
    border:1px solid #ccc;
    padding:4px 10px 12px 10px;
    background-color:#efefef;
    margin-top:20px;
    float:left;
}

/* playlist entry */
#playlist a {
    display:block;
    width:280px;
    height:90px;
    padding:7px;
    background-color:#fff;
    border:1px solid #ccc;
    font:11px "bitstream vera sans", "lucida grande",verdana;
    text-decoration:none;
    margin-top:7px;
    color:#666;
}

/* different states of a playlist entry */
#playlist a:hover {
    background-color:#ffc;      
}

#playlist a.progress {
    background-color:#efefef;   
}

#playlist a.playing {
    border:1px solid #666;
    background-color:#ffc;  
}

#playlist a.paused {
    border:1px solid #666;
    background-color:#ffc;  
}

/* elements inside playlist entry */
#playlist a img {
    border:0;   
    float:left;
    margin-right:10px;
}

#playlist a strong {
    color:blue;     
    padding-bottom:5px;
}

#playlist a em {
    border:0;   
    float:left;
    margin-right:10px;
    background:url(/img/demos/clock.gif) no-repeat 0 50%;
    padding-left:20px;
    color:#333;
    font-style:normal;
    margin-top:10px;
}

</style>

<script type="text/javascript">

var push1 = {"url": "videoplayer/videos/591483.flv", "duration": "0.22"};
var push2 = {"url": "videoplayer/videos/581192.flv", "duration": "0.22"};
var MyList = [];

MyList.push(push1);
MyList.push(push2);


  $f("player", "http://releases.flowplayer.org/swf/flowplayer-3.1.1.swf", {
    // common clip: these properties are common to each clip in the playlist
    clip: {
      baseUrl: "http://mm.com/mmA/",
      // by default clip lasts 5 seconds
      duration: 5
    },
    // playlist with entries
    playlist: MyList,
    debug: true,
    plugins: {
      controls: {
        // you do not need full path here when the plugin
        // is in the same folder as flowplayer.swf
        url: "flowplayer.controls-3.1.1.swf",
        playlist: true,
        backgroundColor: "#aedaff",
        tooltips: {
          buttons: true,
          fullscreen: "Enter Fullscreen mode"
        }
      }
    }
  });


</script>

</head>
<body>

<table>

<tr>
<td> 

<a id="player" class="player">
<img src="http://static.flowplayer.org/img/player/btn/play_text_large.png" />
</a>

</td>
<td>


</td>
</tr>

</table>

<br clear="all" />
</body>
</html>

Appreciate any help offer.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Manage to find the answer. The answer as follows (Just in case anyone need it.)

    var myplaylist = [];

//... do stuff

myplaylist.push("first.flv");

//... do stuff

myplaylist.push({url: "second.flv", duration: 60});

//... do stuff

$f("playerContainer", "/path/to/flowplayer-3.2.7.swf", {
  clip: {
    // common clip properties
    scaling: "fit"
  },
  playlist: myplaylist
});
    • 0