Cross-posted on the Flowplayer forums, but no response there yet, so I hope someone here could help.
I'm having no success at all using the Playlist plugin. I've followed the examples at http://flowplayer.org/plugins/javascript/playlist.html closely, and I get the initial clip to work, but the Playlist plugin does not seem to register. The video loads and plays, so FlowPlayer is loading properly, but playlist doesn't attach any functionality to my playlist objects.
I confirmed that the playlist script is loading: I added alert("playlist!"); to the top of the flowplayer.playlist-3.0.8.js, just after the initial comment block and before the start of the function code. When I load my web page, I see the alert. I get the same results whether using the minified or normal versions of the scripts, and whether I call the flowplayer function with flowplayer() or $f(). I'm using flowplayer 3.2.3 and playlist 3.0.8.
Here's a dead-simple static page that tries to render a FlowPlayer and two clips in a gallery: FlowPlayer appears, but clicking on either of the gallery links replaces the current page with the video playing directly in the browser window, instead of keeping me on the HTML page and playing the video in the FlowPlayer instance.
If I add a config param to the FlowPlayer call and provide a default clip, then that clip plays, but again the gallery links just take me to the raw clip, rather than pushing the clip into the FlowPlayer.
<!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>
<title>test flowplayer</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="/_library/script/flowplayer/flowplayer-3.2.3.min.js" type="text/javascript"></script>
<script src="/_library/script/flowplayer/flowplayer.playlist-3.0.8.min.js" type="text/javascript"></script>
</head>
<body>
<div id="player" style="display: block; width: 776px; height: 432px;"></div>
<div id="gallery">
video 1
video 2
</div>
<script type="text/javascript">
$(function () {
$f("player", "/_library/script/flowplayer/flowplayer-3.2.3.swf")
.playlist("gallery");
});
</script>
</body>
</html>
Any idea what I'm doing wrong? Any help appreciated, let me know if you need more details.
Thanks!
- Val
$f("player", "/_library/script/flowplayer/flowplayer-3.2.3.swf").playlist("gallery");
maybe?
.playlist() is not a function of $(function () {})
$(function () {})
Is how you register an event handler for the load event. Because of this,The code within it is not executed until the load event is fired by the browser and it is possible that the plugin is not available yet.
Also, you are not following the tutorials closely. The code the have is like this
$(function() {
// setup player without "internal" playlists
$f("player2", "http://releases.flowplayer.org/swf/flowplayer-3.2.3.swf", {
clip: {baseUrl: 'http://blip.tv/file/get'}
// use playlist plugin. again loop is true
}).playlist("div.petrol", {loop:true});
});
Note that .playlist is called on the return of $f(), not on $(function(){...}).
OK, fixed.
Many of the examples use a class on the playlist container. In examples using a class, the playlist function is passed a CSS selector -- usually something like playlist("div.gallery")
I changed my markup to use a class, changed the param to playlist() to a fully-qualified CSS selector, and it works!!!
Now, I don't want to use a class-- I have a single playlist element, so I want to use an ID. I changed the markup back to an ID:
<div id="gallery">
video1
video2
</div>
and changed the caller to use a CSS selector for IDs:
playlist("div#gallery");
And that works too!
Finally, I wondered if I needed to specify the element that has the playlist ID, and I don't -- I can give it just a CSS ID selector:
playlist("#gallery");
I think my problem was that with the main flowplayer script, you can address the placeholder element without the . or # qualifier, like $f("player"); instead of $f("#player");. But the Playlist plugin is more picky, and you have to use the qualifier.
All that pain for a single character!
Related
I'm trying to create an onclick soundboard but I can't seem to get anything to work. I'm new to javascript. I also am unsure if my audio files are actually being linked in the function because VSCode is not even attempting to autofill the file location. the mp3s are located in the project file inside of the assets folder.
<body>
<ul>
<li onclick="playBeat1()"></li>
</ul>
<script type="text/javascript" src="js/main.js"></script>
</body>
///JS FILE///
function playBeat1() {
var audio = new Audio("tone1.mp3");
audio.play();
}
(can't comment) well for starters you need to show the code where your playBeat1() function is being called so that we can help you further. But if that function is the only thing in your code then you need to run the function when an event listener is fired. For example:
document.getElementById("elementNameHere").addEventListener("clicK",function() {
playBeat1();
});
But please note that your audio will not play right away. The user needs to click something before you can start playing audio with javascript. To get around this just place a start button that will reveal the rest of the page.
Also, I noticed your html file is sort of...not right. You need to wright:
<!DOCTYPE html>
<html>
<head>
<title>title here</title>
</head>
<!-- body element here -->
</html>
(just noticed your js file location)
assuming that only js files go into the "js" folder, you need to write:
var audio = new Audio("../audioFolder/tone1.mp3");
the ../ will give you access to the folder that your js folder is inside of.
I'm sanitizing CDATA content from various third-party XML feeds, stripping all HTML server-side and using Linkify.js.org (v3.0.3) to safely reapply HTML tags to the sanitized plaintext links client-side.
My project relies a lot on jQuery (v3.6.0).
The linkify jQuery DOM Data API is working great on links and email addresses, but hashtags are proving problematic. By default, hashtags redirect to https://my-domain.com/current-dir/#<HashTag>, but I'd like them to redirect to https://twitter.com/hashtag/<HashTag>. I know this is possible from the demo examples, but I'd like to stick with a jQuery solution, and maintain the div data attributes if possible.
I've read the documentation from Linkify.js.org/docs/ but can't figure out how to change the hashtag URL without dropping the jQuery div data attributes.
Below is a simple example (it's important I maintain a _blank HREF target):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Linkify</title>
</head>
<body>
<div data-linkify="this" data-linkify-target="_blank">
Domain Test: domain.com. Email Test: email#address.com. HashTag Test: #Linkify.
</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/linkify.min.js"></script>
<script src="/js/linkify-jquery.min.js"></script>
<script src="/js/linkify-plugin-hashtag.min.js"></script>
</body>
</html>
Work's great, but as mentioned, #Linkify redirects to the same page (e.g; https://my-domain.com/current-dir/#Linkify).
Client-side JS is not my strong point, but is there a data-linkify attribute I can use to change the HashTag destination to Twitter? Or additional jQuery code I can use to modify the behaviour of the linkify-plugin-hashtag.min.js plugin?
Use the hashtag plugin options... And since you do not want to call linkify directly, you'll need to play with the default options.
If you add this, it should work out.
linkify.options.defaults.formatHref.hashtag= (href) =>
'https://twitter.com/hashtag/' + href.substr(1);
You can read more at https://linkify.js.org/docs/plugin-hashtag.html and https://linkify.js.org/docs/options.html
I'm embedding a Windows Media Player control in an HTML page.
<object width="720"
height="480"
id="Player"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<!-- <param> tags left out -->
</object>
To subscribe to events from the control (e.g. PlayStateChange(newState)), I have to add a <script> tag, like the following:
<script language="JScript" for="Player" event="PlayStateChange(newState)">
var newStateText = document.createTextNode('' + newState);
var playStateContainer = document.getElementById('PlayState');
while (playStateContainer.firstChild) {
playStateContainer.removeChild(playStateContainer.firstChild);
}
playStateContainer.appendChild(newStateText);
</script>
Isn't there a way to subscribe to these event through plain JavaScript (without the extra <script> tag for every event I'm interested in on every single instance of the control)?
With 5 instances of the control and 5 events I want too subscribe to, this would be 25 script tags.
Furthermore, the control is wrapped in some library code in an external JavaScript file. The event handling code should be there too, and not in the HTML of the client application.
According to this MSDN article (see sections Naming Conventions and Automagic), you can write all your event handlers inside the same <script> tag, provided that you name the functions objectname::eventname or objectname.eventname:
<script language="JScript">
function Player::playStateChange(newState) {
...
}
function Player.currentPlaylistChange(change) {
...
}
</script>
I didn't try this though. And of course, this is all IE-specific.
I have this short Javascript code that I want to put in a external file. The reason being is because there will be many .htm pages that would use it. So instead of putting it all inline at every single file, I want to put it in an external file.
But the thing is, it doesn't work. The script is basically a "back to top" button. It works flawlessly when I put the script in the .htm file. Another note by the way, I'm loading the .htm file in a Div, could that cause problems? Edit: The file is loaded through the .load() jQuery function.
I have also tried putting the script inline in my index.html but it fails to work there too.
Here is the code:
$('.backtotopwrapper').click(function(){
$('body,html').animate({scrollTop: "0px"},1500);
});
Update: I have tested my other .js code and the ones that have nothing to do with the .htm file work. The code that is specific to the elements inside the .htm is the only one that doesn't work.
OK, 3 files :
main.html
loremIpsum2.html
myScroll.js
1). In main.html I call jQuery and myScroll.js external files
Also I have an empty wrapper div (<div id="loader"></div>) where I put the contents of loremIpsum2.html using jQuery .load() so
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>link to external js file</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="myScroll.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#loader").load("loremIpsum2.html");
}); // ready
/* ]]> */
</script>
</head>
<body>
<div id="wrap">
<div id="loader"></div>
</div><!--wrap-->
</body>
</html>
2). In loremIpsum2.html, I have just a bunch of paragraphs but at the end I have my button :
<a class="backtotopwrapper" href="javascript:;">go to top</a>
3). In myScroll.js i Have the function for my scrolling button :
$(function () {
$('body').on("click", ".backtotopwrapper", function () {
$('body,html').animate({
scrollTop: 0
}, 1500);
});
});
Since I am loading the file where the button is via .load(), I am using .on() in its delegated form.
See DEMO and feel free to explore the source code.
NOTE : .on() requires jQuery v1.7+
I had the same problem but didn't perform any solution mentioned here, i actually dicovered what made it work for me when my external scripts werent working but the same code works internally.
Just remove any spaces/special characters from your external script filename e.g instead of calling it "admin-script.js", call it "adminscript.js", without the special characters like the hyphen, then refer to the script with the new name and thats it, it worked for me.
My webpage is using some api's together and the total process time for the page to load is around 8 seconds. I want to show a page loading image while the page is loading. Could be like the whole page is dimmed out and an image is shown which represents the page loading and once the page loads i want to go back to my page. How can i show this functionality in a php website?
Little more info:
The page is not even loading until all the visualizations in the page have completely loaded. In other words, the URL of the page is not even changing as soon as the link is clicked. As soon as the link is changing, the webpage is loaded, so any solution or reason why this is happening?
I am actually using GAPI class to get Google analytics feed and using google visualization javascript api to show the images. I am using multiple GAPI for different data parameter calls since one certain combinations wont work in one command...
a sample:
$pie->requestReportData(ga_profile_id,array('browser'),array('pageviews'),'-pageviews','',$start_date,$end_date,$start_index=1,$max_results=50);
$ga->requestReportData(ga_profile_id,array('date'),array('visits','visitors'),'date','',$start_date,$end_date,$start_index=1,$max_results=50);
The values returned are stored in an array and used for google visualization api.
Each of this is stored in seperate files and i am calling them using include ();
Use jQuery...
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#loading").hide();
});
</script>
Right below body start tag put...
<img id="loading" alt="" src="ajax.gif"/>
You can create some ajax loading gifs here... http://www.ajaxload.info/
Add this CSS...
#loading{position:fixed;top:50%;left:50%;z-index:1104;}
Update
Replace with this JS code, leave the googlecode line.
<script type="text/javascript">
$(document).ready(function()
{
$("#info").load("info.php");
$("#linechart").load("linechart.php");
$("#piechart").load("piechart.php");
$("#loading").hide();
});
</script>
HTML:
<div id="#info"></div>
<div id="#linechart"></div>
<div id="#piechart"></div>
Hope it helps.
Use the following function:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(window).load(function()
{
$("#loading").hide();
});
</script>
Well, there are few issues on this path.
First of all, you output html to show loading screen, and run flush() command.
Ensure you do not have any gzip compression in php or apache, as content would not be sent to the browser.
Then, you have to pray that browser would be smart enough to render it and not wait for xxx kb of data till next render.
Anyway, I would invest more time in optimization. Or do a light main page and do the rest of functionality via AJAX.
This is not actually php.
But you can do as follows:
Add the following to the head section:
<script type="text/javascript" language="javascript">
function wait()
{
if(document.getElementById)
{
document.getElementById('waitpage').style.visibility='hidden';
}
else
{
if(document.layers)
{
document.waitpage.visibility = 'hidden';
}
else
{
document.all.waitpage.style.visibility = 'hidden';
}
}
}
</script>
Change the <body> to <body onLoad="wait();">
and add the following in the beginning of body section:
<div id="waitpage" style="left:0px; top:0px; position:absolute; layer-background-color:white; height:100%; width:100%;">
<table width="100%" height="100%">
<tr>
<td><img src="path-to-image"/></td>
</tr>
</table>
</div>