Issues arise when Flowplayer fails to display properly and is unable to access the designated element

I have a code that enables FlowPlayer to retrieve a Javascript array and play the video files upon user click.

However, I am facing two issues:

  1. The player and playlist are not being displayed on the page.
  2. An error related to Flowplayer's inability to access an element.

(In case anyone asks, the full path of the video is )

Below you will find the complete 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>

I would greatly appreciate any assistance provided.

Answer №1

Successfully discovered the solution. Here is the answer for reference:

var myplaylist = [];

//... make necessary modifications

myplaylist.push("first.flv");

//... make necessary modifications

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

//... make necessary modifications

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating various containers in React JS for different components

I am faced with the task of rendering multiple DOM elements from my JavaScript code. Imagine I have div elements like this: <div id="div1"><div> //Some Html tags <div id="div2"><div> //Some Html tags <div id="div3" ...

Trigger audio files in the array at a 0.5-second interval

Currently, I am in the process of developing a Simon game, but I have encountered a roadblock that I am struggling to overcome. My main challenge lies in handling the array with the currentSequence that holds random sounds from another array. I have establ ...

The length of JSON data retrieved may vary between Internet Explorer and Firefox

After receiving JSON data from the server via AJAX, I proceeded to evaluate it as follows: request.responseText=[{name:xxx},{name:yyy},{name:zzz}]. I then used the following code snippet: var data=eval(request.responseText); alert(data.length); Surpri ...

Remove specified JSON elements according to a designated list of permitted elements

My task involves filtering an array of allowedFields that corresponds to the keys in a JSON array created from a form. Some fields obtained are not necessary for validation at this point, so I aim to compare the values in the JSON array with those in the ...

Uncaught jQuery onchange event not firing

I am facing an issue with a drop-down list inside a data grid on the main page. When values are changed, a popup should display and the values from the popup need to be sent back to the main page. However, I am having trouble triggering the onchange event. ...

Error message: Angular JS function is not defined

I have been diving into AngularJS with the help of video tutorials from AngularJS.org. However, when I try to run my code, an error message pops up: Error: [ng:areq] Argument 'ReviewController' is not a function Even though my code mirrors th ...

Verify whether the current directory includes a package.json file with a matching name value

When I run a custom command in the terminal, I am attempting to achieve two objectives: Verify if there is a package.json file in the current directory (similar to checking for the existence of process.cwd() + '/package.json'). Determine if the ...

Tips for utilizing ng-checked and ng-disabled in conjunction with ng-repeat

I encountered a challenge with ng-repeat while incorporating ng-checked and ng-disable alongside it. <div ng-repeat="module in modulelist"> <input id="switch{{$index}}" ng-init="setState($index);" type="checkbox" ng-checked="switch.checked" ng-di ...

Challenges with creating a contact form using bootstrap modal

I'm facing an issue with a bootstrap modal contact form. It works fine on all browsers except for iPad/Safari. Can anyone help me figure out what's wrong? On iPad, the modal is positioned to the right and down the page instead of in the cente ...

Angular: Enhancing View Attribute by Eliminating Extra Spaces

I'm using an ng repeat directive to dynamically set the height in my code. <ul> <li ng-repeat="val in values" height-dir >{{val.a}}</li> </ul> app.directive('heightDir',function(){ return { restrict: ' ...

Utilize the UseQuery graphql function in conjunction with the useState hook within useEffect, allowing for the execution of an additional useEffect to update additional state

In my NextJS project, I am utilizing Apollo for graphQL queries and encountering an issue with the stateData.allProducts section. Despite setting the state in the useEffect and including data as a dependency in the array, the error claims it is null when d ...

A Simple Guide to Setting a Background Image in React Native with the Nativebase.io Library

What is the process for including a background image in React Native with the help of the Nativebase.io Library? I have a specific screen where I need to incorporate a background image, with all other elements positioned at the center of the image. ...

What is the purpose of including window and undefined as parameters in this jQuery plugin?

Exploring the jquery resize plugin has left me puzzled about its inner workings: Typically, we only pass a jQuery object into jquery plugins like this: (function($){ ....plugin code.... })(jQuery); However, in the "resize" plugin, both window and un ...

Using a variable name to retrieve the output in JavaScript

I created a unique JavaScript function. Here is the scenario: Please note that the code provided below is specific to my situation and is currently not functioning correctly. analyzeData('bill', 'userAge'); Function analyzeData(u, vari ...

bootboxjs prompt type not recognized - the given example in the documentation is ineffective

I have been experimenting with the functionality of in my project. I started off by using their example code to test if it works. Following the guidelines provided, I have integrated the latest versions of bootstrap, jquery, and bootstrap js, along with ...

Coordinating the vertical scrolling of two div elements simultaneously. (scrolling both divs together)

I have a specific setup where I have a text box that is scrollable, and outside of this box are headings that correspond to different sections in the text. I am looking for a way to synchronize the scrolling of the text inside the box with the headings out ...

What is the process of exporting a generator function in TypeScript?

Here is an example I have in JavaScript: export function* mySaga () { yield takeEvery('USER_FETCH_REQUESTED', fetchUser); } I'm wondering if it's possible to rewrite it as an arrow function in TypeScript, like the snippet below: ...

Display various information with every "show details" button clicked on the Bootstrap Vue table row

My table has rows with multiple "More Details" buttons that, when clicked, reveal additional information specific to that row. The goal is to display information X when the first "More Details" button is clicked and information Y when the second "More Deta ...

Seamless Axios operations even without internet connection in Vue.js

In my Nativescript Vue.js application, there is a functionality where the user clicks on login, Axios makes a call to an endpoint to fetch a token. However, I noticed that when the emulator phone is offline, the Axios call still goes through and the &apos ...

React blank state - State remains undefined after calling setState

I took out the imports because they are not causing any issues When I render, I set my state and it logs correctly in the console. However, when I try to map it, it comes back as null and gives me an error stating that there are no elements in the "allInf ...