Then, in javascript, implement the method that sets the text, something like this might work
var bufferingProcess = null;
function startBuffering()
{
var bufferingSpan = document.getElementById("bufferingSpan");
var bufferingText = bufferingSpan.innerHTML;
switch(bufferingText)
{
case "Buffering":
bufferingSpan.innerHTML = "Buffering.";
break;
case "Buffering.":
bufferingSpan.innerHTML = "Buffering..";
break;
case "Buffering...":
bufferingSpan.innerHTML = "Buffering...";
break;
default
bufferingSpan.innerHTML = "Buffering";
break;
}
bufferingProcess = setTimeout("startBuffering();", 500);
}
Honestly, there are better ways to manage the text, but this isn't the real point. The key is using the setTimeout at the end, this will make it call itself every 500 milliseconds. So whenever you need to start the loop, just call startBuffering(); However, you will need a way to stop it. Since this code uses a global variable to track the process, you can cancel it. Call the following function when you are all loaded:
function stopBuffering()
{
if (buffferingProcess)
clearTimeout(bufferingProcess);
bufferingProcess = null;
}
So if, for example, you just wanted to show the buffering text and stop it after 10 seconds, run the following two lines of code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="test_buffering_Default" %>
<!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 runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
var bufferingProcess = null;
function startBuffering()
{
var bufferingSpan = document.getElementById("bufferingSpan");
var bufferingText = bufferingSpan.innerHTML;
switch(bufferingText)
{
case "Buffering":
bufferingSpan.innerHTML = "Buffering .";
break;
case "Buffering .":
bufferingSpan.innerHTML = "Buffering ..";
break;
case "Buffering ..":
bufferingSpan.innerHTML = "Buffering ...";
break;
case "Buffering ...":
bufferingSpan.innerHTML = "Buffering ....";
break;
case "Buffering ....":
bufferingSpan.innerHTML = "Buffering";
break;
default:
bufferingSpan.innerHTML = "Buffering";
break;
}
bufferingProcess = setTimeout("startBuffering();", 125);
}
function stopBuffering()
{
if (bufferingProcess)
clearTimeout(bufferingProcess);
bufferingProcess = null;
var bufferingSpan = document.getElementById("bufferingSpan");
bufferingSpan.innerHTML = "";
}
function playClicked()
{
startBuffering();
setTimeout("stopBuffering();", 10000);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<span id="bufferingSpan"></span>
<br />
<br />
<input id="Button1" type="button" value="Play" onclick="playClicked();"/>
</div>
</form>
</body>
</html>
BTW, I had to use 10 seconds as a forced cutoff because I couldn't find an event for the HTML5 audio tag that indicated the mp3 stream was now playing. The events lisitd on the sites I visited seemed to be designed for non-streaming audio.
Marked as answer by Mark Br on Nov 27, 2012 02:22 AM
Take a look at the mediaelement library for jQuery. I am looking into this for a project to handle cross-browser media playback, and it seems to do a pretty good job so far. It'll try to use HTML5, but fall back to flash if either the html tag or the media
type is not supported. It also exposes some helpful events that I have been able to use to do some nifty stuff like highlight text as the audio is playing.
http://mediaelementjs.com/
"Dream as if you'll live forever, live as if you'll die today." --James Dean
Mark Br
Member
89 Points
173 Posts
How to display animated "Buffering ..."?
Nov 26, 2012 08:41 PM|LINK
Hi
When a user clicks a play button image on my aspx page, does anyone know the Javascript that will do the following:
In another place on the page, display the text:
Buffering.
Buffering..
Buffering...
(in the same place, changing every second to look animated).
After 10 seconds, stop the animation and hide the text completely.
TIA
Mark
AceCorban
Star
12318 Points
2269 Posts
Re: How to display animated "Buffering ..."?
Nov 26, 2012 08:58 PM|LINK
just have some element on your page, like a span:
Then, in javascript, implement the method that sets the text, something like this might work
var bufferingProcess = null; function startBuffering() { var bufferingSpan = document.getElementById("bufferingSpan"); var bufferingText = bufferingSpan.innerHTML; switch(bufferingText) { case "Buffering": bufferingSpan.innerHTML = "Buffering."; break; case "Buffering.": bufferingSpan.innerHTML = "Buffering.."; break; case "Buffering...": bufferingSpan.innerHTML = "Buffering..."; break; default bufferingSpan.innerHTML = "Buffering"; break; } bufferingProcess = setTimeout("startBuffering();", 500); }Honestly, there are better ways to manage the text, but this isn't the real point. The key is using the setTimeout at the end, this will make it call itself every 500 milliseconds. So whenever you need to start the loop, just call startBuffering(); However, you will need a way to stop it. Since this code uses a global variable to track the process, you can cancel it. Call the following function when you are all loaded:
function stopBuffering() { if (buffferingProcess) clearTimeout(bufferingProcess); bufferingProcess = null; }So if, for example, you just wanted to show the buffering text and stop it after 10 seconds, run the following two lines of code:
startBuffering(); setTimeout("stopBuffering();", 10000);Mark Br
Member
89 Points
173 Posts
Re: How to display animated "Buffering ..."?
Nov 27, 2012 01:42 AM|LINK
Thanks very much for all that.
Here's the code I tested:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="test_buffering_Default" %> <!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 runat="server"> <title>Untitled Page</title> <script type="text/javascript"> var bufferingProcess = null; function startBuffering() { var bufferingSpan = document.getElementById("bufferingSpan"); var bufferingText = bufferingSpan.innerHTML; switch(bufferingText) { case "Buffering": bufferingSpan.innerHTML = "Buffering ."; break; case "Buffering .": bufferingSpan.innerHTML = "Buffering .."; break; case "Buffering ..": bufferingSpan.innerHTML = "Buffering ..."; break; case "Buffering ...": bufferingSpan.innerHTML = "Buffering ...."; break; case "Buffering ....": bufferingSpan.innerHTML = "Buffering"; break; default: bufferingSpan.innerHTML = "Buffering"; break; } bufferingProcess = setTimeout("startBuffering();", 125); } function stopBuffering() { if (bufferingProcess) clearTimeout(bufferingProcess); bufferingProcess = null; var bufferingSpan = document.getElementById("bufferingSpan"); bufferingSpan.innerHTML = ""; } function playClicked() { startBuffering(); setTimeout("stopBuffering();", 10000); } </script> </head> <body> <form id="form1" runat="server"> <div> <span id="bufferingSpan"></span> <br /> <br /> <input id="Button1" type="button" value="Play" onclick="playClicked();"/> </div> </form> </body> </html>BTW, I had to use 10 seconds as a forced cutoff because I couldn't find an event for the HTML5 audio tag that indicated the mp3 stream was now playing. The events lisitd on the sites I visited seemed to be designed for non-streaming audio.
AceCorban
Star
12318 Points
2269 Posts
Re: How to display animated "Buffering ..."?
Nov 27, 2012 03:06 PM|LINK
Take a look at the mediaelement library for jQuery. I am looking into this for a project to handle cross-browser media playback, and it seems to do a pretty good job so far. It'll try to use HTML5, but fall back to flash if either the html tag or the media type is not supported. It also exposes some helpful events that I have been able to use to do some nifty stuff like highlight text as the audio is playing.
http://mediaelementjs.com/